css - CSS 属性名称中的 'font -' vs ' text-'

Question

CSS 属性名称中使用的术语“文本”和“字体”有何区别？它们的意思是一样的，还是以 font- 开头的 CSS 属性名称和以 text- 开头的 CSS 属性名称之间存在语义差异？

例如，为什么我们有这些 CSS 属性:

font-size: 34px;
text-decoration: underline;

而不是他们被这样命名？

font-size: 34px;
font-decoration: underline;

还是这样？

text-size: 34px;
text-decoration: underline;

此处使用font- 和text- 的方式是否存在语义差异，或者前缀的选择是否完全随意？

Answer 1

就我的理解而言:

文本:布局和呈现的计算方式。

字体:字符到字形的映射。当您考虑连字和其他高级字体功能时，一对一“映射”并不完全成立，但总的来说它是一个很好的心智模型。字体决定了字符的形状。

您可以为使用某种字体绘制的文本加下划线，但不能为字体本身加下划线。不过，您可以调整形状的大小，使使用该字体绘制的文本具有更大的字形。 (因此，字体大小)

这也是您使用 font-style: italic 而不是 text-style: italic 的原因，因为当您以斜体排版时实际形状会发生变化。 font-weight 与 text-weight 也是如此。

希望这对您有所帮助。

---

如果您查看以 text- 开头的属性和以 font- 开头的属性，您会发现明显的区别:

text-align
text-decoration
text-indent
text-justify
text-outline
text-overflow
text-shadow
text-transform
text-wrap

这些都用于文本的布局、定位或视觉呈现。

font
font-family
font-size
font-style
font-variant
font-weight
@font-face
font-size-adjust
font-stretch

而这些都是用来变换字符的形状，字形。