【前端】CSS字体相关属性详解
文章目录
- 💯前言
- 🌸 字体系列：font-family
- 字体系列的定义
- 设计注意事项
- Unicode 字体编码
- 示例
- 🌸 字体大小：font-size
- 字体大小的定义
- 字体大小的单位
- 示例
- 推荐设置
- 🌸 字体粗细：font-weight
- 字体粗细的定义
- 具体数值与关键词
- 示例
- 实际应用中的注意事项
- 🌸 文字风格：font-style
- 文字风格的定义
- 常用的属性值
- 实际应用中的注意事项
- 示例
- 🌸 字体复合属性：font
- 字体复合属性的定义
- 使用复合属性的注意事项
- 示例
- 🌸 字体在实际应用中的一些建议'
- 🌸 总结
💯前言
-
在现代网页设计中，字体的选择和样式的设定可以极大地影响用户的视觉体验。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 楷体_GB2312 KaiTi_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 丽黑 Pro LiHei 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 或 标签，如果不想让它们的文本默认加粗，可以使用 font-weight: normal; 来取消。
🌸 文字风格：font-style
文字风格的定义
font-style 属性用于设置文本的风格，通常用于定义文本是否为斜体。
代码示例：
p { font-style: italic; }在这个例子中，段落文本将以斜体呈现。
常用的属性值
- normal：表示普通的字体样式。
- italic：表示斜体样式。
- oblique：表示倾斜样式，与 italic 类似，但有细微区别。
实际应用中的注意事项
- 减少使用斜体：在实际设计中，我们通常不喜欢大面积使用斜体，因为它在阅读时可能不如普通字体那么清晰。
- 取消默认斜体：例如对 或 标签，如果不想让文本倾斜，可以使用 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 允许开发者根据不同的设计需求自定义文本的显示方式。以下是关键点的总结：
- font-family 定义字体系列，通过多种字体组合确保不同设备的兼容性，避免因为某些设备缺少特定字体而导致页面显示问题。
- font-size 用于定义文本的大小，通常以像素为单位，能确保在不同浏览器中的一致性，尤其是在设计响应式网页时推荐使用相对单位。
- font-weight 可以用数值或关键词来表示文本的粗细，灵活地适应各种设计需求。
- font-style 用于设置文本的风格，通常用来定义斜体或倾斜样式，但在实际设计中应慎用。
- font 复合属性 允许开发者将多种字体属性组合成一个设置，以提高代码的简洁性和可读性。
- 通过对这些属性的深入理解和合理应用，开发者可以在文本的风格、可读性和视觉美感之间取得平衡，从而创造出更具吸引力和易读性的网页设计。字体虽然是网页设计中的一个细节，但其影响是巨大的，良好的字体选择和样式设置能够大大提升用户的阅读体验。希望通过这篇文章，您对 CSS3 中字体相关的属性有了更加深入的理解和掌握。
.....
- 推荐字体：在网页中，我们常用的字体系列包括 Microsoft YaHei（微软雅黑），Arial，Hiragino Sans GB（冬青黑体）等。这些字体在不同的操作系统中都能找到，能最大程度确保网页显示效果的一致性。
-
免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们。
