CSS基础教程：字体（一）

最新推荐文章于 2025-04-10 11:53:39 发布

m0_65012566

最新推荐文章于 2025-04-10 11:53:39 发布

阅读量138

点赞数

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

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

版权

css 专栏收录该内容

29 篇文章

订阅专栏

CSS基础教程：字体（一）

简介

字体是一组具有一致设计和风格的文本字符。它包括字体的形状、大小、粗细和其他属性。

字体用于在各种媒介中显示和表示文本，例如印刷品、数字屏幕和平面设计。
可以选择字体来传达特定的情绪或美学，增强可读性，或与品牌的身份相一致。
字体在沟通和设计中起着至关重要的作用。
字体可以唤起不同的情感，并向观众传达特定的信息。

本章演示如何设置 HTML 元素中的内容字体。可以设置以下字体属性：

font：它是所有其他与字体相关的属性的缩写，可以在一个声明中传递。
font-family：指定要用于文本的字体系列或字体系列列表。
font-feature-settings：控制 OpenType 字体中的高级排版特性，如花边、小型大写字母和连字。
font-kerning：确定特定字母对的间距方式。
font-language-override：覆盖特定语言的字体行为。
font-optical-sizing：设置文本渲染是否应优化以在不同大小上查看。
font-palette：指定字体中包含的各种调色板之一。
font-size：设置文本的大小。可以用像素（px）、点（pt）、百分比（%）、ems（em）或其他单位来指定。
font-size-adjust：根据当前字体大小设置小写字母的大小。
font-stretch：设置扩展、压缩或正常字体。
font-style：指定文本的样式，如“italic”、“oblique”或“normal”。
font-weight：确定文本的粗细或加粗程度。常见值为“normal”和“bold”，虽然也可以使用数值（例如，100、200、300）和关键字（例如，“lighter”、“bolder”）。
font-synthesis：确定浏览器是否应该合成缺少的粗体、斜体和/或小型大写字母。
font-synthesis-small-caps：确定浏览器是否应该合成缺少的小型大写字母。
font-synthesis-style：确定浏览器是否应该合成缺少的斜体。
font-synthesis-weight：确定浏览器是否应该合成缺少的粗体。
font-variant：控制文本中小写字母的使用。值可以是“normal”或“small-caps”。
font-variant-alternates：控制替代字形的使用。
font-variant-caps：控制大写字母的替代字形的使用。
font-variant-east-asian：控制用于东亚文字（如中文和日文）的替代字形的使用。
font-variant-ligatures：控制元素的文本内容，决定使用哪种连字或上下文形式。
font-variant-numeric：控制数字、分数和序数标记的替代字形的使用。
font-variant-position：控制替代、较小的字形的使用位置，设置为上标或下标。
font-variation-settings：指定可变字体特性的四字母轴名称。
line-height：设置行框的高度。还设置文本行之间的距离。

font属性

为了缩短代码，CSS 允许使用字体的简写属性，其中所有以下属性可以在一个声明中指定：

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

font-style
font-variant
font-weight
font-stretch
font-size
line-height
font-family

要记住的要点：

属性 font-style、font-variant 和 font-weight 必须始终出现在 font-size 之前。
值 normal 和 small-caps 只能与属性 font-variant 一起指定。
属性 font-stretch 只能是一个关键字值。
属性 line-height 必须在 / 之前跟随属性 font-size，例如："20px/3"。
属性 font-family 必须是指定的最后一个值。
必须提供 font-family 和 font-size 的值，如果任一值缺失，则使用默认值。

系统字体

以下是系统字体值的列表：

caption：用于带标题的控件，例如按钮、下拉菜单等。
icon：用于标签图标。
menu：用于菜单，例如下拉菜单或列表菜单。
message-box：用于对话框。
small-caption：用于标记小控件。
status-bar：用于窗口状态栏。
前缀系统字体关键词：由浏览器实现，例如 -moz-window、-moz-document、-moz-desktop、-moz-info、-moz-dialog、-moz-button、-moz-pull-down-menu、-moz-list 和 -moz-field。

使用多种字体

以下是一个示例：

<html>
<head>
<style>
   p {
      border: 2px solid blue;
   }
</style>
</head>
<body>
   <h2>Font Shorthand Property</h2>
   <p style = “font: oblique normal bold 20px Arial, sans-serif;”>
      Shorthand Property Font
   </p>
</body>
</html>

备用字体

备用字体是在特定字体不可用或无法在设备或Web浏览器上显示时使用的字体。

备用字体是根据其与所需字体的风格或设计的相似性选择的，选择备用字体时，应确保其文本保持可读性，以及预期外观。

一些备用字体的示例如下：

Arial：常用的备用字体，类似于Helvetica。
Times New Roman：设计易于阅读，通常用于印刷和数字媒体。
Verdana：Verdana是一种无衬线备用字体，专门设计用于屏幕上的易读性。
Georgia：这种衬线备用字体通常用于网络上的正文文字。
Courier New：Courier New经常用于等宽文本，是在需要固定宽度字体时常用的备用字体。

字体属性

以下是样式化字体的CSS属性列表：

属性	描述
font	简写字体属性。
font-family	指定要用于文本的字体系列或字体系列列表。
font-feature-settings	控制OpenType字体中的高级排版特性。
font-kerning	确定特定字母对之间的间距方式。
font-language-override	为特定语言覆盖字体行为。
font-optical-sizing	设置文本的呈现是否应优化以在不同大小下查看。
font-palette	允许使用字体中包含的各种调色板之一。
font-size	设置文本的大小。
font-size-adjust	指定字体的纵横比（数字比率），控制其x高度。
font-stretch	调整文本的宽度（压缩或扩展）。
font-style	指定文本的样式，如“italic”、“oblique”或“normal”。
font-weight	设置文本的粗细或加粗程度。
font-synthesis	简写字体综合属性。
font-synthesis-small-caps	确定浏览器是否应合成字体系列中缺失的小型大写字体。
font-synthesis-style	确定浏览器是否应合成字体系列中缺失的斜体字体。
font-synthesis-weight	确定浏览器是否应合成字体系列中缺失的粗体字体。
font-variant	控制文本中小写字母的小型大写字体的使用。
font-variant-alternates	控制备用字形的使用。
font-variant-caps	控制大写字母的备用字形的使用。
font-variant-east-asian	控制东亚文字（如中文和日文）的备用字形的使用。
font-variant-ligatures	控制元素的文本内容，指定使用哪种连字或上下文形式。
font-variant-numeric	控制数字、分数和序数标记的备用字形的使用。
font-variant-position	控制替代、较小的字形的使用，位置为上标或下标。
font-variation-settings	指定可变字体特征的四字母轴名称。
line-height	设置行框的高度。也设置文本行之间的距离。