CSSを使用して固定幅に非固定幅フォントを強制的に適用する

Question

CSSを使用してフォントの固定幅を強制する方法はありますか？

これは、モノスペース以外のフォントを使用すると、ブラウザが固定幅で各文字をレンダリングするように強制できますか？

Answer 1

実際のモノスペースフォントでない限り、いいえ。

Answer 2

いいえ、CSSで何も強制することはできません。また、モノスペース以外のフォントをモノスペースフォントとしてレンダリングする方法もありません。

Answer 3

CSSでこれを行うことはできません。あなたは、結果は恐ろしい見えますができたとしても：

をあなたが本当にこれを実行する必要がない場合は、要素内の個々の文字をラップ（または単に手でそれを行う）するためにJavaScriptを使用することができます。

function wrap_letters($element) { 
 
    for (var i = 0; i < $element.childNodes.length; i++) { 
 
     var $child = $element.childNodes[i]; 
 

 
     if ($child.nodeType === Node.TEXT_NODE) { 
 
      var $wrapper = document.createDocumentFragment(); 
 

 
      for (var i = 0; i < $child.nodeValue.length; i++) { 
 
       var $char = document.createElement('span'); 
 
       $char.className = 'char'; 
 
       $char.textContent = $child.nodeValue.charAt(i); 
 

 
       $wrapper.appendChild($char); 
 
      } 
 

 
      $element.replaceChild($wrapper, $child); 
 
     } else if ($child.nodeType === Node.ELEMENT_NODE) { 
 
      wrap_letters($child); 
 
     } 
 
    } 
 
} 
 

 
wrap_letters(document.querySelectorAll('.boxes')[0]); 
 
wrap_letters(document.querySelectorAll('.boxes')[1]);

.char { 
 
    outline: 1px solid rgba(255, 0, 0, 0.5); 
 
} 
 

 
.monospace .char { 
 
    display: inline-block; 
 
    width: 15px; 
 
    text-align: center; 
 
}

<h2 class="boxes">This is a title</h2> 
 
<h2 class="boxes monospace">This is a title</h2>

Answer 4

なぜ、このためのボックスの外側と内側テーブルとは思いません：

<table cellpadding="0" cellspacing="0"> 
<tr><td>T</td><td>h</td><td>e</td><td></td><td>r</td><td>a</td><td>i</td><td>n</td><td></td><td>i</td><td>n</td><td></td><td>S</td><td>p</td><td>a</td><td>i</td><td>n</td><td></td><td>s</td><td>t</td><td>a</td><td>y</td><td>s</td></tr> 
<tr><td>m</td><td>a</td><td>i</td><td>n</td><td>l</td><td>y</td><td></td><td>i</td><td>n</td><td></td><td>t</td><td>h</td><td>e</td><td></td><td>p</td><td>l</td><td>a</td><td>i</td><td>n</td><td>s</td><td>.</td></tr> 
</table> 

私はカウントダウンのために時々verryかなりのことをやった

Answer 5

：

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;} 
} 

Answer 6

さて、あなたが使用して言わなかっただけ CSS。 spanに各文字を折り返すために、ちょっとしたJavascriptでこれを行うことができます。残りは... CSSで通常のテキストと段落で

window.onload = function() { 
 
    const secondP = document.getElementById('fixed'); 
 
    const text = secondP.innerText; 
 
    const newText = text.split('').map(c => { 
 
    const span = `<span>${c}</span>`; 
 
    return span; 
 
    }).join(''); 
 
    secondP.innerHTML = newText; 
 
}

p { 
 
    position: relative; 
 
    border: 1px solid black; 
 
    border-radius: 1em; 
 
    padding: 1em; 
 
    margin: 3em 1em; 
 
} 
 

 
p::after { 
 
    content: attr(name); 
 
    display: block; 
 
    background-color: white; 
 
    color: green; 
 
    padding: 0 0.5em; 
 
    position: absolute; 
 
    top: -0.6em; 
 
    left: 0.5em; 
 
} 
 

 
#fixed span { 
 
    display: inline-block; 
 
    width: 1em; 
 
    text-align: center; 
 
}

<p id="variable" name="Variable Width">It might not look nice, but with a little Javascript, I can force a variable width font to act like a fixed-width font.</p> 
 
<p id="fixed" name="Fixed Width">It might not look nice, but with a little Javascript, I can force a variable width font to act like a fixed-width font.</p>

あり、それはひどい見えますが、これは理にかなっているときのインスタンスがあります。アイコンフォントとUnicodeシンボルは両方ともこの手法を利用することができます。

通常のテキストを他のUnicode記号に置き換えたときに右にシフトしていたUnicode記号の解決策を見つけようとしているときに、この質問が見つかりました。この場合は

Answer 7

は（伝統的なタイポグラフィとの）一部のフォントは可変幅で、デフォルトでは、それらをレンダリングしたテーブルで整列桁のためである（例えば、Windows上のSegoe UI）、あなたがのためのCSSプロパティになります。

font-variant-numeric: tabular-nums;

（これにより、数字スペーシングバリアントのproportional-numsデフォルト値は無効になります）

JavaScriptが必要です。これらのフォントで可変幅のグリフを無効にし、表の数字を使用するのが最もクリーンな方法です（これは一般的に同じフォントの同じグリフで使用されますが、先頭と末尾の隙間が増えて10桁から0 9は同じ幅でレンダリングされますが、フォントによっては視覚的な桁間のスペースを避けることができ、数字の一部をわずかに表示したり、数字の桁に下のセリフを追加したりすることがあります。

可変長Segoe UIで観察した。（例えば、いくつかの数字として他人がアセンダやディセンダを持つことになり、小文字のみのようなX-高さになります）これらの伝統的な桁のフォームは使用して、あまりにもCSSを無効にすることができ

font-variant-numeric: lining-nums;

（これは数値の桁のバリアントのデフォルトの「オールドスタイル-NUMS」の値を無効にします）

あなたは両方を組み合わせることができます。

font-variant-numeric: tabular-nums lining-nums;