编辑“︁CSS网络安全字体”︁

= CSS网络安全字体 =

== 介绍 ==
'''CSS网络安全字体'''（Web-Safe Fonts）是指在不同操作系统和浏览器中普遍预装的字体集合，确保网页在没有加载自定义字体时仍能保持一致的视觉呈现。由于用户设备可能无法访问服务器托管字体，网络安全字体成为跨平台兼容性的重要解决方案。

== 核心原理 ==
当浏览器渲染文本时，会按CSS的<code>font-family</code>属性顺序尝试加载字体。如果首选的字体不存在，则回退到下一个选项。网络安全字体通过选择'''系统内置字体'''实现无需网络请求的稳定显示。

<mermaid>
graph LR
    A[用户访问网页] --> B{字体已安装?}
    B -->|是| C[直接渲染]
    B -->|否| D[使用下一个后备字体]
</mermaid>

== 常见网络安全字体列表 ==
以下是最常用的跨平台字体组合（按优先级排序）：

{| class="wikitable"
|+ 通用字体族与具体字体对应表
! 字体族 !! Windows !! macOS !! Linux !! 移动端
|-
| '''无衬线''' || Arial || Helvetica || DejaVu Sans || Roboto
|-
| '''衬线''' || Times New Roman || Times || DejaVu Serif || Noto Serif
|-
| '''等宽''' || Courier New || Courier || DejaVu Mono || Menlo
|}

== 代码示例 ==
=== 基础用法 ===
<syntaxhighlight lang="css">
/* 无衬线字体栈 */
body {
    font-family: Arial, Helvetica, sans-serif;
}

/* 衬线字体栈 */
article {
    font-family: "Times New Roman", Times, serif;
}

/* 等宽字体栈 */
code {
    font-family: "Courier New", Courier, monospace;
}
</syntaxhighlight>

=== 高级回退策略 ===
通过CSS变量定义完整字体栈：
<syntaxhighlight lang="css">
:root {
    --sans-fallback: system-ui, -apple-system, BlinkMacSystemFont, 
                     "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, 
                     "Helvetica Neue", sans-serif;
}

.modern-ui {
    font-family: "CustomFont", var(--sans-fallback);
}
</syntaxhighlight>

== 数学公式支持 ==
当需要在文本中显示公式时，网络安全字体需包含数学符号：
<math>
E = mc^2
</math>
使用<code>Cambria Math</code>或<code>Symbol</code>等系统字体可确保公式渲染。

== 实际应用案例 ==
'''电商网站商品价格显示'''要求严格对齐：
<syntaxhighlight lang="css">
.price {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-variant-numeric: tabular-nums; /* 数字等宽对齐 */
}
</syntaxhighlight>

'''控制台模拟界面'''需要精确的字符宽度：
<syntaxhighlight lang="css">
.terminal {
    font-family: "Lucida Console", Monaco, monospace;
    letter-spacing: 0.02em;
}
</syntaxhighlight>

== 性能优化建议 ==
1. 优先使用系统默认的无衬线字体（如<code>system-ui</code>）
2. 限制字体栈深度（最多3-4个后备选项）
3. 对中文等非拉丁文字指定本地化后备：
<syntaxhighlight lang="css">
:lang(zh) {
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
</syntaxhighlight>

== 浏览器兼容性 ==
{| class="wikitable"
|+ 主要浏览器对通用字体族的支持
! 特性 !! Chrome !! Firefox !! Safari !! Edge
|-
| <code>system-ui</code> || 56+ || 43+ || 11+ || 79+
|-
| <code>emoji</code> 族 || 53+ || 50+ || 11+ || 79+
|}

== 参见 ==
* [[CSS字体回退机制]]
* [[响应式排版设计]]
* [[可变字体技术]]

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS文本与字体]]