有没有办法让可变宽度的字体在HTML中像固定宽度的字体一样工作？ [英] Is there a way to make a variable width font act like a fixed width font in HTML?

问题描述

有没有办法让一个可变宽度的字体在HTML中像一个固定宽度的字体一样工作？例如，如果我有一个固定宽度的字体Courier New中显示的句子快速灰狐跳过懒狗，它将会是总体上比如果使用可变宽度字体如Arial更宽。我想使用Arial而不是Courier New，但字符宽度固定。

可变宽度示例：

快速灰色狐狸跳过懒狗。

固定宽度示例：

快速灰狐狸跳过懒狗

注意每个例子中字符在quick和gray两个字之间的相互距离。

解决方案

不仅仅是CSS。我建议您使用流行的 Lettering.js （您需要使用jQuery）来生成 span 标签围绕每个字符，然后设置所有字符的宽度。

  .monospace> span {
 display：inline-block; / *启用宽度* / 
 width：1em; / *设置所有字符的宽度* / 
 text-align：center; / *甚至超出间距* / 
} 
  

测试用例

Is there a way to make a variable width font act like a fixed width font in HTML?

For example, if I have the sentence, "The quick grey fox jumped over the lazy dog" displayed in "Courier New", a fixed width font, it would be wider overall than if it was in a variable width font like, "Arial". I would like to use "Arial" instead of "Courier New" but have the characters fixed width.

Example of variable width:
The quick grey fox jumped over the lazy dog.

Example of fixed width:

The quick grey fox jumped over the lazy dog

Notice how close the characters are to each other in the word "quick" and "grey" in each example.

解决方案

Not with just CSS. I would recommend you use the popular Lettering.js (you'll need jQuery for it) to generate span tags around each character, then set an width across all the characters.

.monospace > span {
  display: inline-block; /* Enable widths */
  width: 1em;            /* Set width across all characters */
  text-align: center;    /* Even out spacing */
}

Test Case

这篇关于有没有办法让可变宽度的字体在HTML中像固定宽度的字体一样工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！