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

Question

CSS属性名称中使用的术语'text'和'font'有什么区别？它们是相同的意思,还是以CSS开头的一个属性名称font-和一个以text-？开头的语言之间存在语义差异？

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

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

而不是像这样命名？

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

或者像这样？

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

是否有方式的语义差别font-和text-正在这里使用的,或者是前缀的选择完全是任意的？

Answer 1

就我的理解而言:

文本:计算布局和表示的方式.

字体:字符到字形映射.当您考虑连字和其他高级字体功能时,1对1'映射'并不完全支持,但通常它是一个很好的心理模型.字体决定了字符的形状.

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

这也是为什么你有font-style: italic而不是text-style: italic,因为当你用斜体排版时实际的形状会发生变化.与font-weightvs 相同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

这些都用于转换角色的形状,字形.