在跨平台网站上设置原生字体

• 简介
• 先决条件
• 说明
  • 1. 定义字体栈
  • 2. 包含自定义字体(可选)
  • 3. 将字体栈应用于元素
• 结论

简介

确保在不同平台上字体外观一致和原生化,对于无缝的混合Web体验至关重要。我们将演示如何使用CSS字体栈,在iOS、macOS和Android上优先使用原生字体,并为自定义字体和通用字体提供后备。

先决条件

• HTML和CSS基础知识
• 文本编辑器或IDE
• 用于测试的Web浏览器

说明

1. 定义字体栈

在CSS中,使用font-family为所需元素定义字体栈,并按平台优先级排列原生字体:

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', 'Nanum Gothic', sans-serif;
}

字体栈顺序:

1. -apple-system: iOS和macOS系统字体
2. BlinkMacSystemFont: 较新的macOS系统字体
3. 'Roboto': Android默认字体
4. 'Helvetica Neue': 较旧的iOS/macOS后备字体
5. 'Nanum Gothic': 当系统字体不可用时的自定义字体
6. sans-serif: 通用后备字体系列

2. 包含自定义字体(可选)

对于'Nanum Gothic'等自定义字体,请将字体文件包含在你的项目资源中。在CSS中使用@font-face指定文件和位置:

@font-face {
  font-family: 'Nanum Gothic';
  src: url('path/to/nanum-gothic.woff2') format('woff2'),
       url('path/to/nanum-gothic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

对于TailwindCSS,请参阅在带有TailwindCSS的Vue3 CLI项目中集成自定义字体。

3. 将字体栈应用于元素

使用CSS选择器将font-family应用于特定元素:

h1, h2, h3 {
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', 'Nanum Gothic', sans-serif;
}

p {
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', 'Nanum Gothic', sans-serif;  
}

结论

通过按平台优先级顺序设置CSS字体栈,你的网站将在每个平台上使用原生字体,以获得熟悉且一致的外观。该栈从iOS/macOS系统字体开始,然后是Android默认字体,最后是自定义和通用后备字体。

这种方法可确保你的网站排版在不同设备和平台上看起来都是原生且无缝的。