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

Question

CSS属性名称中使用的术语'text'和'font'有什么区别？它们是相同的意思，还是以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

就我的理解而言：

文本：计算布局和表示的方式。

字体：字形到字形映射。 1对1＆＃39;映射＆＃39;当您考虑连字和其他高级字体功能时，并不完全支持，但一般来说它是一个很好的心理模型。字体决定了字符的形状。

您可以为使用特定字体绘制的文本加下划线，但不能为字体本身加下划线。但是，您可以调整形状的大小，使用该字体绘制的文本具有更大的字形。 （因此，font-size）

这也是为什么你有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

这些都用于转换字符的形状，字形。

Answer 2

CSS属性名称的部分没有任何意义，并且属性名称作为一个整体仅具有 CSS规范（或草稿）中赋予它的含义。通常，当被解释为英语单词时，名称暗示其含义，但名称​​不定义含义，并且某些名称是完全误导的。 （例如，即使在不涉及空格字符的上下文中，white-space也会影响分割行。）

因此名称只是标识符，但在名称分配中可能存在一些系统性。碰巧的是，以font-开头的属性名称与用于呈现字符的字体选择或使用字体的特定方式有关。以text-开头的属性名称与格式化文本（字符）的其他方面有关。

这种划分相对比较清晰，但这取决于技术：格式化的某些功能与字体相关，由于字体技术的工作方式，有些则不然。

该部门反映在CSS3“模块”部门中：字体相关功能在CSS Fonts Module Level 3中定义（定义名称以font开头的属性），而其他文本格式化功能主要定义在CSS Text Module Level 3中（定义名称以text-开头的一些属性，但也包含其他属性）。

Answer 3

查看MDN's CSS Reference上列出的font-属性，在我看来，以font-开头的属性会影响或至少有可能影响的选择用于绘制特定字符的font-family中的哪种字体。以text-开头的属性永远不会这样做，但会做各种其他的事情，包括后期渲染以添加文字效果，例如独立于字形选择的阴影。

例如......

• font-family - 提供一个字体系列列表，从中选择用于呈现每个字符的字体;显然，这会影响字形选择。
• font-weight - 在可能的情况下，通过从font-family中选择适当的粗体字，以正确的粗体显示文字。

• font-size - 显然会影响所选的实际字体，因为并非所有字体格式都是可任意缩放的。以下来自font-family docs（强调我的）的引用证实了这一点：

    

  如果字体仅在某些样式，变体或 尺寸 中可用，则这些属性也可能会影响所选的字体系列。

  （虽然我猜这主要是一个历史问题，因为我认为今天仍然没有使用不可缩放的字体格式。）

• font-size-adjust - 与上述内容非常相似。

• font-stretch - 引用文档：

    

  此属性不会通过拉伸或缩小来更改任意字体的几何。像font-feature-settings或font-variant一样，它只是选择最合适的字体面的一种方法，如果这个字体提供了几个字体。

......等等。并非所有这些属性始终都会影响字体选择;例如，font-size显然是关于字形呈现，而不是字体选择，在可缩放字体的情况下，font-weight和font-style属性可能导致浏览器合成粗体或斜体字形​​，而不是使用粗体或斜体字体，如noted by W3：

  

尽管这种做法并不受印刷师的喜爱，但大胆的面孔通常由用户代理合成，用于缺乏实际大胆面孔的面孔。

font-属性的共同之处在于，它们是可能影响字体和字形选择的属性。因此，选择何时使用font-或text-前缀似乎不是任意的。