CSS 基础教程：字体（四）

Hudson 译原文

字体拉伸(`font-stretch`)

某些字体系列提供了额外的字体面，其中字符可以比其正常外观更窄或更宽。 font-stretch属性允许调整文本的宽度（压缩或展开）。

注意：如果字体不支持压缩或展开形式，则font-stretch属性将不起作用。

此属性的可能值如下：

normal：指定正常的字体面。
semi-condensed、condensed、extra-condensed、ultra-condensed：指定比正常更紧凑的字体面。
semi-expanded、expanded、extra-expanded、ultra-expanded：指定比正常更宽阔的字体面。
<percentage>：百分比值，可以是50%到200%。
initial：将值设置为初始值。
inherit：从父元素值继承。

关键字和相应百分比值的映射：

关键字	百分比
ultra-condensed	50%
extra-condensed	62.5%
condensed	75%
semi-condensed	87.5%
normal	100%
semi-expanded	112.5%
expanded	125%
extra-expanded	150%
ultra-expanded	200%

下面是一个使用font-stretch属性例子：

<html>
<head>
<style>
   body {
      font-family: Arial, sans-serif;
   }
</style>
</head>
<body>
   <h2>字体拉伸</h2>
   <p style = "font-stretch: normal;">
      正常
   </p>
   <p style = "font-stretch: condensed;">
      压缩
   </p>
   <p style = "font-stretch: expanded;">
      展开
   </p>
   <p style = "font-stretch: 170%;">
      拉伸170%
   </p>
</body>
</html>

font-style属性

字体样式用于改变文本的外观或样式。font-style属性用于指定所选文本的字体样式。

CSS中有三种主要的字体样式：

normal：默认的字体样式，文本以正常显示，没有任何倾斜或斜率。
italic：文本呈现为斜体样式，向右倾斜轻微。
oblique：文本类似于斜体，但倾斜或角度更夸张。
oblique <angle>：具有指定角度的斜体文本。

对于oblique <angle>，解释如下：

如果没有oblique字体，浏览器将按指定的角度倾斜文本。
角度的有效值为-90deg至90deg（包括）。
如果未指定角度，则浏览器将设置为14deg。
正角度值将文本倾斜到行的末端。
负角度值将文本倾斜向行的开头。
更大的角度值优先。

使用CSS选择器,可以将上述字体样式应用于任何HTML元素，也可以与其他字体属性（如font-family、font-size等）组合使用，以创建新所需的文本样式。

注意：Firefox浏览器兼容 font-style:oblique <angle> 属性。

下面是一个例子：

<html>
<head>
<style>
   p {
      padding: 5px;
      border: 2px solid blue;
   }
</style>
</head>
<body>
   <h2>字体样式</h2>
   <p style = "font-style: normal;">
      文本将保持正常。
   </p>
   <p style = "font-style: italic;">
      文本将呈现斜体。
   </p>
   <p style = "font-style: oblique;">
      文本将呈现斜体。
   </p>
   <p style = "font-style: oblique 45deg;">
      文本将呈现斜体，并倾斜45度。
   </p>
</body>
</html>

font-weight属性

字体粗细（或字重)指的是字符的粗细或加粗程度。在字体系列中，不同的粗细可以用于创建文本中的视觉层次结构,或者表达强调。

font-weight用来设置字体的粗细。可能值如下：

normal：普通字体粗细。等同于400。
bold：加粗字体粗细。等同于700。
<number>：介于1和1000之间的值定义字体的粗细。较高的数字比较低的数字更粗（或者与较低的数字一样粗）的权重。
lighter：比父元素的字体较轻细一些。
bolder：比父元素的字体较粗一些。

下面是一个例子：

<html>
<head>
<style>
   p {
      padding: 5px;
      border: 2px solid blue;
   }
</style>
</head>
<body>
   <h2>字体粗细</h2>
   <p style = "font-weight: normal;">
      字体粗细为normal。
   </p>
   <p style = "font-weight: bold;">
      字体粗细为bold。
   </p>
   <p style = "font-weight: 500;">
      字体粗细为500（中等）。
   </p>
</body>
</html>

font-synthesis属性

font-synthesis属性确定浏览器是否应合成缺失的字体系列中的粗体、斜体和/或小型大写字体。

font-synthesis属性是以下属性的简写：

font-synthesis-weight
font-synthesis-style
font-synthesis-small-caps

该属性的可能值如下：

none：表示不合成粗体、斜体或小型大写字体。
weight：表示浏览器可能合成缺失的粗体字体。
style：表示浏览器可能合成缺失的斜体字体。
small-caps：表示浏览器可能合成缺失的小型大写字体。

许多字体包含粗体和斜体变体，少数字体可能还有小型大写字体变体，但用于语言（例如中文、韩文、日文等）的字体没有这些变体，因此合成它们可能会使它们不可读。因此，在这些情况下，建议禁用默认的font-synthesis。

下表列出了传递给简写属性font-synthesis的值及其对应的属性值：

font-synthesis值	font-synthesis-weight值	font-synthesis-style值	font-synthesis-small-caps值
none	none	none	none
weight	auto	none	none
style	none	auto	none
small-caps	none	none	auto
weight style	auto	auto	none
weight small-caps	auto	none	auto
style small-caps	none	auto	auto
weight style small-caps	auto	auto	auto

下面是一个例子：

<html>
<head>
   <link rel=“stylesheet” href=“https://fonts.googleapis.com/css2?family=Montserrat&display=swap”>
   <link rel=“stylesheet” href=“https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap”>
<style>
   p {
      margin-bottom: 5px;
      border: 2px solid red;
   }
   .eng {
      font-family: “Montserrat”, sans-serif;
   }
   .chi {
      font-family: “Ma Shan Zheng”;
   }
   .no-syn {
      font-synthesis: none;
   }
   .syn {
      font-synthesis: style weight;
   }
</style>
</head>
<body>
   <h3>DEFAULT</h3>
   <p class=“eng”>
      Supports <strong>bold</strong> and <em>italic</em>.
   </p>
   <p class=“chi”><strong>加粗</strong>和<em>斜体</em> 支援的字體.</p>
   <h3>DISABLED SYNTHESIS</h3>
   <p class=“eng no-syn”>
      Do not support <strong>bold</strong> and <em>italic.</em>
   </p>
   <h3>DISABLED SYNTHESIS</h3>
   <p class=“chi no-syn”>这个字体支持<strong>加粗</strong>和<em>斜体</em></p>
   <h3> SYNTHESIS IS ENABLED </h3>
   <p class=“eng syn”>
      Supports <strong>bold</strong> and <em>italic</em>.
   </p>
   <p class=“chi syn”><strong>加粗</strong>和<em>斜体</em> 支援的字體.</p>
</body>
</html>

CSS 基础教程：字体（四）

CSS 基础教程：字体（四）

字体拉伸(font-stretch)

font-style属性

font-weight属性

font-synthesis属性

字体拉伸(`font-stretch`)