Force Non-Monospace Font into Fixed Width Using CSS

前端 未结 8 1910
心在旅途
心在旅途 2020-11-29 04:08

Is there any way to force a font to be monospaced using CSS?

By this I mean, using a non-monospace font, can you force the browser to render each character at a fixe

相关标签:
8条回答
  • 2020-11-29 04:31

    No, not unless it's an actual mono-spaced font.

    0 讨论(0)
  • 2020-11-29 04:35

    I've done a verry pretty thing sometimes for countdowns:

    html:

    <div class="counter">
        <span class="counter-digit counter-digit-0">2</span>
        <span class="counter-digit counter-digit-1">4</span>
        <span class="counter-digit counter-digit-divider">/</span>
        <span class="counter-digit counter-digit-2">5</span>
        <span class="counter-digit counter-digit-3">7</span>
    </div>
    

    scss:

    $digit-width: 18px;
    .counter {
    
        text-align: center;
        font-size: $digit-width;
    
        position: relative;
    
        width : $digit-width * 4.5;
        margin: 0 auto;
        height: 48px;
    }
    .counter-digit {
    
        position: absolute;
        top: 0;
        width: $digit-width;
        height: 48px;
        line-height: 48px;
        padding: 0 1px;
    
        &:nth-child(1) { left: 0; text-align: right; }
        &:nth-child(2) { left: $digit-width * 1; text-align: left;}
        &:nth-child(3) { left: $digit-width * 2; text-align: center; width: $digit-width / 2} // the divider (/)
        &:nth-child(4) { left: $digit-width * 2.5; text-align: right;}
        &:nth-child(5) { left: $digit-width * 3.5; text-align: left;}
    }
    
    0 讨论(0)
提交回复
热议问题