fontsize 和 字母宽度之间的关系？

Question

今天在做一个类似一个固定宽度，然后自动换行的设计。
突然发现了一个问题：当我现在容器宽度是 300px ，字体大小为 20px。效果如下:

最开始的时候，我以为是我字体宽度计算有问题，于是重新设计了半天，后来突然想到会不会是字母宽度和我字体 fontsize 不是等宽的？

---

经过测试，发现还真是。
如下图，我将字母 g 换成字母 x，发现正好不换行。

于是
我再分别测这两个字母的宽度，确实是这个问题导致的。

---

我幡然醒悟，但是却不知道这其中有何转化关系，这个组件的设计也不能达到完美，也没搜索到相关文档介绍这两者之间的关系的，遂特来请教。

Answer 1

不好意思，没怎么看懂你是想要实现英文单词不换行的效果，还是想要字母等宽，只能提供一点思路。单词不换行可以使用 word-wrap:break-word 。英文字母是否等宽与字体有关，想要等宽得设置为等宽的字体。希望能帮到你。

Answer 2

font-size 决定的是文字的理论高度，真实高宽都有字体本身决定，所以没办法通过简单的数值计算得到。

所以也没办法很简单的实现多行文本自适应。

Answer 3

或许你需要的是字体等宽？font-family:monospace
https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-family

Answer 4

font-size 是指的 字体高度，和宽度没关系
英文字母 4线3格 最大高度 是确定的，但是宽度差别极大，比如 i 和 w

后来也有 等宽字体（编程用的比较多），具体在字体设计相关的说明里比较多

css 字体相关的解释比较清楚的参考下面链接
https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

另外如果你不是网页的字体宽度计算，一般用系统或者库的函数（大部分是measure开头的）来计算，如果你想自己根据 opentype 或者 truetype 字体来计算的话，需要详细去研究字体设计规范。这里面挺复杂的，还有什么 2，3个字符连续的时候，合并成一个符号的规则之类的。