【前端】CSS字体相关属性详解

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端

文章目录

💯前言

• 在现代网页设计中，字体的选择和样式的设定可以极大地影响用户的视觉体验。CSS 提供了丰富的字体属性，这些属性可以帮助开发者定义文本的字体系列、大小、粗细，以及文字风格，从而使网页更加生动和个性化。
• 本篇文章将全面介绍 CSS3 中与字体相关的属性，详细阐述它们的使用方式和注意事项。让我们一起来深入了解如何使用这些属性来使网页的文本呈现出最理想的效果。 CSS

🌸 字体系列：font-family

字体系列的定义

在 CSS 中，可以使用 font-family 属性来定义文本的字体系列。这个属性决定了浏览器在呈现文本时应该使用的字体。

代码示例：

p{font-family:"微软雅黑";}div{font-family: Arial,"Microsoft Yahei","微软雅黑";}

上述代码中的

font-family

属性定义了一个字体列表，浏览器将从左到右依次寻找用户计算机中存在的字体，找到第一个可用字体后便停止寻找。

设计注意事项

• 字体优先级顺序：font-family 属性通常指定多个字体，以确保页面在不同设备和操作系统中都能得到正确的显示。当第一个字体不可用时，浏览器会按顺序查找列表中的下一个字体。
• 字体名称与引号：对于包含空格的字体名称，必须使用引号。例如 "Microsoft Yahei"，但对于单词间没有空格的字体，可以省略引号，如 Arial。
• 使用通用字体：建议在列表的最后指定一种通用字体，例如 sans-serif 或 serif，以保证在其他字体不可用时仍有合适的字体可以使用。通用字体是指一种字体类别，而不是具体的字体名称。
• 不同系统的字体库：每个操作系统都有自己的字体库，例如在 Windows 系统中可以找到的字体位于 C:\Windows\Fonts 目录下，而 macOS 系统中则有自己的默认字体系列。

代码示例：

body{font-family:"Microsoft YaHei","Heiti SC", tahoma, arial,"Hiragino Sans GB", sans-serif;}

• 推荐字体：在网页中，我们常用的字体系列包括 Microsoft YaHei（微软雅黑），Arial，Hiragino Sans GB（冬青黑体）等。这些字体在不同的操作系统中都能找到，能最大程度确保网页显示效果的一致性。

Unicode 字体编码

有时候，我们需要使用 Unicode 编码来避免字体名称的编码问题。尤其是在涉及到中文字体时，直接在 CSS 中使用中文名称可能导致兼容性问题，例如编码不一致的情况。

示例

p{font-family:"\5FAE\8F6F\96C5\9ED1";/* 表示微软雅黑 */}

字体名称英文名称Unicode 编码宋体SimSun\5B8B\4F53新宋体NSimSun\65B0\5B8B\4F53黑体SimHei\9ED1\4F53微软雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1楷体_GB2312KaiTi_GB2312\6977\4F53_GB2312隶书LiSu\96B6\4E66幼圆YouYuan\5E7C\5706华文细黑STXihei\534E\6587\7EC6\9ED1细明体MingLiU\7EC6\660E\4F53新细明体PMingLiU\65B0\7EC6\660E\4F53华文楷体STKaiti\534E\6587\6977\4F53华文仿宋STFangsong\534E\6587\4EFF\5B8B华文行楷STXingkai\534E\6587\884C\6977华文新魏STXinwei\534E\6587\65B0\9B4F华文隶书STLiti\534E\6587\96B6\4E66华文中宋STZhongsong\534E\6587\4E2D\5B8B方正黑体FZHei-B01\65B9\6B63\9ED1\4F53方正楷体FZKai-Z03\65B9\6B63\6977\4F53方正仿宋FZFangSong-Z02\65B9\6B63\4EFF\5B8B思源黑体Source Han Sans\601D\6E90\9ED1\4F53思源宋体Source Han Serif\601D\6E90\5B8B\4F53标楷体DFKai-SB\6807\6977\4F53华康细圆体DFPHeiW5-A\534E\5E7F\7EC6\5706长城中黑体ChangChengZhongHei\957F\57CE\4E2D\9ED1丽黑 ProLiHei Pro\4E3D\9ED1\0046 Pro华康黑体DFPHei-B5\534E\5E7F\9ED1中等线体Medium Line\4E2D\7B49\7EBF汉仪黑体Hanyi Hei\6C49\4E49\9ED1\4F53汉仪楷体Hanyi Kai\6C49\4E49\6977\4F53方正姚体FZYaoti\59F9\4F53方正粗宋FZCuSong\7C97\5B8B\4F53思源明体Source Han Mincho\601D\6E90\660E\4F53华康雅宋DFPLiSong-W9\534E\5E7F\96C5\5B8B方正艺黑FZYiHei\827A\9ED1\4F53
使用 Unicode 编码的好处是能确保在不同的编码环境中字体都能正确显示，尤其是在某些不支持中文名称的操作系统中。

🌸 字体大小：font-size

字体大小的定义

font-size

属性用于定义文本的大小，通常以 像素（px） 或其他单位来表示。它是网页设计中最常用的属性之一，因为字体的大小直接关系到用户的阅读体验。

代码示例：

p{font-size: 20px;}

在上面的示例中，

font-size

被设定为 20 像素，这意味着该元素的文本将以 20 像素的大小呈现。

字体大小的单位

• px（像素）：最常见的单位，也是最精确的单位，可以让字体在各个浏览器中看起来一致。
• em 和 rem：相对单位。em 依赖于父元素的字体大小，而 rem 则依赖于根元素的字体大小。这些单位在响应式设计中非常有用。
• 百分比（%）：可以将字体大小设置为父元素字体大小的一个百分比。这样做可以让字体大小随页面的整体调整而变化。
• vw 和 vh：视口单位。vw 表示视口宽度的百分比，vh 表示视口高度的百分比，这些单位通常用于响应式设计。

示例

body{font-size: 16px;}p{font-size: 1.5em;/* 相当于 24px */}

在这个例子中，段落的字体大小相当于父元素（即 body）的 1.5 倍，也就是 24 像素。

推荐设置

• 明确指定字体大小：尽量给一个明确的字体大小值，不要依赖浏览器的默认值，因为不同浏览器的默认值可能会有所不同。
• 适应不同设备：在设计响应式网页时，使用相对单位（如 em 或 rem）可以帮助确保字体大小在不同设备上自适应调整，增强用户体验。

🌸 字体粗细：font-weight

字体粗细的定义

font-weight

属性用于设置文本的粗细。可以通过预定义的关键字如

normal

、

bold

，或者具体的数值（如 100、200、300 到 900）来指定。

代码示例：

p{font-weight: bold;}

在这个例子中，段落文本将以加粗的形式呈现。

具体数值与关键词

• lighter、normal、bold、bolder：这些关键字用于表示不同程度的粗细。
• 数值（100 到 900）：font-weight 也可以用数值来表示，从 100 到 900 代表不同的粗细等级，400 表示普通粗细（即 normal），700 表示加粗（即 bold）。

示例

h1{font-weight: 900;/* 非常粗 */}span{font-weight: 300;/* 较细 */}

这种方式比使用

bold

等关键字更灵活，尤其是在设计需要不同层级的文本时。

实际应用中的注意事项

• 细微调整：当需要细微调整不同文本元素的视觉效果时，使用数值而不是简单的 bold 会更加灵活。
• 取消默认加粗：例如对 strong 或 <h> 标签，如果不想让它们的文本默认加粗，可以使用 font-weight: normal; 来取消。

🌸 文字风格：font-style

文字风格的定义

font-style

属性用于设置文本的风格，通常用于定义文本是否为斜体。

代码示例：

p{font-style: italic;}

在这个例子中，段落文本将以斜体呈现。

常用的属性值

• normal：表示普通的字体样式。
• italic：表示斜体样式。
• oblique：表示倾斜样式，与 italic 类似，但有细微区别。

实际应用中的注意事项

• 减少使用斜体：在实际设计中，我们通常不喜欢大面积使用斜体，因为它在阅读时可能不如普通字体那么清晰。
• 取消默认斜体：例如对 <em> 或 <i> 标签，如果不想让文本倾斜，可以使用 font-style: normal;。

示例

em{font-style: normal;/* 取消斜体 */}i{font-style: oblique;/* 设置为倾斜字体 */}

🌸 字体复合属性：font

字体复合属性的定义

为了更简洁地设置字体的各个属性，CSS 提供了

font

复合属性。通过

font

属性，可以同时设置字体的样式、粗细、大小、行高和系列等。

代码示例：

body{font: italic bold 16px/1.5 "Microsoft YaHei", sans-serif;}

在这个例子中，

font

复合属性同时设置了：

• 字体风格为斜体（italic）
• 字体粗细为加粗（bold）
• 字体大小为 16 像素，行高为 1.5
• 字体系列为 微软雅黑，通用字体为无衬线字体（sans-serif）

使用复合属性的注意事项

• 顺序不可变：使用 font 复合属性时，必须按照以下顺序书写：字体风格、字体粗细、字体大小/行高、字体系列。例如 font: font-style font-weight font-size/line-height font-family;。
• 必填项：必须至少指定 font-size 和 font-family，否则该属性不会起作用。其他属性可以根据需求省略。

示例

p{font: normal 400 14px/1.8 Arial, sans-serif;}

在这个例子中，段落的文本将以普通风格（

normal

），400 的粗细（即正常粗细），14 像素大小，行高为 1.8，使用 Arial 字体呈现。

🌸 字体在实际应用中的一些建议’

• 字体的选择：尽量选择系统自带的字体，以确保在不同操作系统中显示的一致性和可读性。比如微软雅黑（Microsoft YaHei）和冬青黑体（Hiragino Sans GB）都是常用的系统字体。
• 优雅降级：指定多个字体作为备选方案，并在最后添加通用字体（如 serif 或 sans-serif）作为保底，以防止用户系统中不存在某些指定的字体。
• 相对单位的使用：在需要响应式布局的页面中，使用 em 或 rem 等相对单位来定义字体大小，确保字体在不同的设备上能够自适应。
• 使用 Unicode 字体编码：对于中文字体名称，最好使用 Unicode 编码来避免编码问题。

🌸 总结

• CSS3 提供的字体相关属性为网页设计师提供了极其丰富的控制文本外观的工具。从字体系列的定义到字体大小、字体粗细、文字风格的控制，CSS3 允许开发者根据不同的设计需求自定义文本的显示方式。以下是关键点的总结：

1. font-family 定义字体系列，通过多种字体组合确保不同设备的兼容性，避免因为某些设备缺少特定字体而导致页面显示问题。
2. font-size 用于定义文本的大小，通常以像素为单位，能确保在不同浏览器中的一致性，尤其是在设计响应式网页时推荐使用相对单位。
3. font-weight 可以用数值或关键词来表示文本的粗细，灵活地适应各种设计需求。
4. font-style 用于设置文本的风格，通常用来定义斜体或倾斜样式，但在实际设计中应慎用。
5. font 复合属性 允许开发者将多种字体属性组合成一个设置，以提高代码的简洁性和可读性。

• 通过对这些属性的深入理解和合理应用，开发者可以在文本的风格、可读性和视觉美感之间取得平衡，从而创造出更具吸引力和易读性的网页设计。字体虽然是网页设计中的一个细节，但其影响是巨大的，良好的字体选择和样式设置能够大大提升用户的阅读体验。希望通过这篇文章，您对 CSS3 中字体相关的属性有了更加深入的理解和掌握。

.....