CSS 基础教程：字体（五）

hudson2022
288 阅读4分钟

CSS 基础教程：字体（五）

Hudson 译 原文

font-variation-settings属性

font-variation-settings属性用于指定可变字体的变体设置。可变字体是一种具有可调属性的字体，如重量、宽度和倾斜，可以更精细地控制字体的外观。

该属性允许使用轴标签和数值定义这些字体变体的值。可能值如下：

  • normal：根据默认设置呈现文本。
  • <string> <number>：
  • <string> 表示为4个ASCII字符。多于或少于四个字符，则无效。
  • <number>表示要设置的轴值。可以是负数或分数，取决于所选字体的值范围。

仅当未使用基本属性font-weight和font-style时才应使用此属性。因为此属性值将始终覆盖基本字体属性（如font-weight等）值。

可变字体轴

可变字体轴是可变字体的可自定义维度或属性。一些常见的轴包括重量、宽度和斜体。

可变字体轴有两种类型：自定义和注册。

以下表格显示了已注册的轴及其CSS属性：

轴CSS属性
wghtfont-weight
wdthfont-stretch
slnt (slant)font-style:oblique <angle>
italfont-style:italic
opszfont-optical-sizing

注意：通常可以在字体的文档或字体创建者提供的规范中找到此信息。一旦获得轴信息，就可以使用font-variation-settings属性定义和控制字体变体。

操作系统必须是最新的，才能在网页中使用可变字体。

以下是使用 font-variation-settings 属性一个例子：

<html>
<head>
<style>
   .container1 * {
      font-weight: 625;
   }
   .container2 * {
      font-variation-settings: 'wght' 625;
   }
   .container3 * {
      font-variation-settings: 'wght' 200;
   }
</style>
</head>
<body>
   <div class="container container1">
      <p>Variation Setting - Weight</p>
   </div>
   <div class="container container2">
      <p>Variation Setting - Weight</p>
   </div>
   <div class="container container3">
      <p>Variation Setting - Weight</p>
   </div>
</body>
</html>

字体行高

line-height属性设置行框的高度，并设置文本行之间的距离。它指定了元素内部行框的最小高度。

该属性的可能值如下：

  • <number>：无单位数字，乘以元素的字体大小。是设置行高的首选方式。
  • <length>：任何长度单位值，如px、pt等。以em单位给出的值可能会产生意外的结果。
  • <percentage>：相对于元素的字体大小。可能会产生意外的结果。
  • normal：值为“normal”的关键字。取决于元素的字体系列和用户的浏览器设置。

建议段落的line-height使用最小值为1.5，因为放大后，行高的值会相对增加，使其更易读。

以下是使用line-height属性一个例子：

<html>
<head>
<style>
   div{
      border: 1px solid red;
      margin: 5px;
      width: 300px;
   }
</style>
</head>
<body>
   <h2>div的行高</h2>
   <div style="line-height: normal;">正常行高</div>
   <div style="line-height: 50%;">百分比行高</div>
   <div style="line-height: 3em;">长度行高</div>
   <div style="line-height: 1.6;">数字行高</div>
</body>
</html>

字体行高

line-height属性设置行框的高度，并设置文本行之间的距离。它指定了元素内部行框的最小高度。

该属性的可能值如下：

  • <number>：无单位数字，乘以元素的字体大小。是设置行高的首选方式。
  • <length>：任何长度单位值，如px、pt等。以em单位给出的值可能会产生意外的结果。
  • <percentage>：相对于元素的字体大小。可能会产生意外的结果。
  • normal：值为“normal”的关键字。取决于元素的字体系列和用户的浏览器设置。

建议段落的line-height使用最小值为1.5，因为放大后，行高的值会相对增加，使其更易读。

以下是使用line-height属性一个例子：

<html>
<head>
<style>
   div{
      border: 1px solid red;
      margin: 5px;
      width: 300px;
   }
</style>
</head>
<body>
   <h2>div的行高</h2>
   <div style="line-height: normal;">正常行高</div>
   <div style="line-height: 50%;">百分比行高</div>
   <div style="line-height: 3em;">长度行高</div>
   <div style="line-height: 1.6;">数字行高</div>
</body>
</html>

CSS字体 - 使用Google字体

除了HTML中提供的标准字体外，还可以利用Google字体的好处。Google提供了1000多种免费开源的字体系列。

为了使用Google字体，需要在<head>部分中添加样式表链接，并在CSS中使用相应的字体。以下是相应的语法：

<head>
   <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans|Sofia">
<style>
   body {
      font-family: "Open Sans", sans-serif;
   }
</style>
</head>

注意事项：

  • 总是至少列出一个备用字体，以防浏览器不支持指定的字体。
  • 如果希望使用多个Google字体，用管道字符（|）分隔字体名称。
  • 可以使用CSS属性（如font-size等）对Google字体进行样式设置。
  • 可以使用属性font-effect-*向Google字体添加特殊效果，其中*可以是任何效果名称，如fire、neon、shadow等。

下面示例显示如何向Google字体添加效果：

<html>
<head>
   <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans|Sofia&effect=fire|neon|shadow-multiple">
<style>
   body {
      font-family: "Open Sans", sans-serif;
      font-size: 25px;
   }
</style>
</head>
<body>
   <h1 class="font-effect-neon">Google字体</h1>
   <h1 class="font-effect-fire">Google字体</h1>
   <h1 class="font-effect-shadow-multiple">Google字体</h1>
</body>
</html>
avatar
文章
阅读
粉丝