CSS 基础教程：字体（二）

m0_65012566

于 2024-05-08 20:47:42 发布

阅读量41

点赞数

分类专栏： css 文章标签： css 前端

原文链接：https://www.tutorialspoint.com/css/css_fonts.htm

版权

css 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

CSS 基础教程：字体（二）

Font family 属性

选择合适的字体系列非常重要，因为它影响并反映了不同的风格、情感和可读性。每个分类都有其自己的内涵和用法。

例如，衬线字体具有字符末端的小装饰或笔画，而无衬线字体具有更清晰和现代的外观。

选择正确的字体是平面设计和品牌设计的重要方面。它可以帮助建立视觉身份，并加强所传达的信息。

该属性的可能值如下：

<family-name>：字体系列的名称。带空格的名称应该用引号括起来。
<generic-name>：这是后备机制。应该是字体系列名称列表中的最后一个值。
serif：具有修饰性笔画、喇叭口或锥形末端的字形。例如：Lucida Bright、Palatino 等。
sans-serif：具有简单笔画结束的字形。例如：Open Sans、Lucida Sans 等。
monospace：相同宽度的字形。例如：Consolas、Monaco、monospace 等。
cursive：带有部分或完全连接笔画的草书字体中的字形。例如：Brush Script MT、Lucida Calligraphy 等。
fantasy：包含字符的装饰性字体。例如：Curlz MT、fantasy 等。
system-ui：来自任何给定平台上默认用户界面字体的字形。
ui-serif：默认用户界面（UI）衬线字体。
ui-sans-serif：默认 UI 无衬线字体。
ui-monospace：默认 UI 等宽字体。
ui-rounded：具有圆角特征的默认 UI 字体。
math：表示数学运算的字体，例如上标、下标、括号、嵌套表达式等。
emoji：表情符号呈现字体。
fangsong：位于衬线风格 Song 和草书风格 Kai 之间的中文字符风格。

以下是一个示例：

<html>
<head>
<style>
   p {
      padding: 5px;
      border: 2px solid blue;
   }
</style>
</head>
<body>
   <h2>字体系列</h2>
   <p style="font-family: 'Times New Roman', Times, serif;">
      文本将是 'Times New Roman'、Times 或衬线。
   </p>
   <p style="font-family: Arial, Helvetica, sans-serif;">
      文本将是 'Arial'、Helvetica 或无衬线。
   </p>
</body>
</html>

字体间距

CSS 提供的 font-kerning 属性有助于确定特定字母对之间的间距方式。

每个字符在其左右边缘上都有一定的空间，当两个字符并排放置时，它们的边缘间隙会从其实际空间中添加起来。

为了调整这些字符的边缘间距，使用 font-kerning 属性。您可以启用或禁用此属性。

该属性的可能值为：

auto：浏览器决定是否应应用字体间距。
normal：必须使用字体中存储的字体间距信息。
none：必须禁用字体中存储的字体间距信息。

以下是一个示例：

<html>
<head>
<style>
   div {
      font-size: 2rem;
      font-family: serif;
   }
   #nokern {
      font-kerning: none;
   }
   #kern {
      font-kerning: normal;
   }
   #auto {
      font-kerning: auto;
   }
</style>
</head>
<body>
   <h2>字体间距</h2>
   <div id="kern">AV</div>
   <div id="nokern">AV</div>
   <div id="auto">AV</div>
</body>
</html>

字体特性设置

CSS 中提供的 font-feature-settings 属性用于控制 OpenType 字体中的高级排版特性，例如花边、小型大写字母和连字。

可能的值为：

normal：默认值。使用默认字体设置。
<feature-tag-value>：以空格分隔的元组形式指定，包含标签名称和可选值。
标签名称始终是四个 ASCII 字符的字符串，否则是无效的。
可选值可以是整数或关键字 on（1）或 off（0）。默认为 0。

语法

/* 使用小型大写字母 */
font-feature-settings: "smcp" on;

/* 将大写和小写字母都转换为小型大写字母 */
font-feature-settings: "c2sc", "smcp";

/* 使用带有斜线的零来与 "O" 区分 */
font-feature-settings: "zero";

/* 启用历史形式 */
font-feature-settings: "hist";

/* 启用常见连字 */
font-feature-settings: "liga" 1;

/* 启用表格式（等宽）数字 */
font-feature-settings: "tnum";

/* 启用自动分数 */
font-feature-settings: "frac", on;

/* 使用第二个可用的花边字符 */
font-feature-settings: "swsh" 2;

以下是一个示例：

<html>
<head>
<style>
   div {
      border: 1px solid red;
      margin: 5px;
      width: 300px;
   }
   p.allcaps {
      padding: 8px; 
      font-weight: bold; 
      font-style: italic; 
      font-feature-settings: 'c2sc', 'smcp';
   }
   p.small-caps {
      padding: 8px; 
      font-weight: bold; 
      font-variant: small-caps; 
      font-feature-settings: 'smcp', off;
   }
</style>
</head>
<body>
   <h2>字体特性设置</h2>
   <div>
      <p class="allcaps">
         字体特性设置 - 全大写
      </p>
      <p class="small-caps">
         字体特性设置 - 小型大写
      </p>
   </div>
</body>
</html>

m0_65012566

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 基础教程：字体（二）

选择合适的字体系列非常重要，因为它影响并反映了不同的风格、情感和可读性。每个分类都有其自己的内涵和用法。例如，衬线字体具有字符末端的小装饰或笔画，而无衬线字体具有更清晰和现代的外观。选择正确的字体是平面设计和品牌设计的重要方面。它可以帮助建立视觉身份，并加强所传达的信息。serifsans-serifmonospacecursivefantasysystem-uiui-serifui-roundedmathemojifangsong以下是一个示例：ppadding;border;</</</
复制链接

扫一扫