css字体类型有哪些

CSS（层叠样式表）中的字体类型主要分为两大类：系统字体和自定义字体。

系统字体

系统字体是指浏览器默认提供的字体，不需要额外下载。常见的系统字体包括：

serif：衬线字体，如Times New Roman。
sans-serif：无衬线字体，如Arial。
monospace：等宽字体，如Courier New。
cursive：手写体字体，如Brush Script MT。
fantasy：装饰性字体，如Papyrus。
system-ui：系统用户界面字体，通常是操作系统的默认UI字体。

示例代码：

body {
  font-family: 'system-ui', sans-serif;
}

自定义字体

自定义字体是指开发者通过@font-face规则引入的字体文件，可以是TTF、OTF、WOFF、WOFF2等格式。自定义字体可以提供更丰富的视觉效果和品牌一致性。

示例代码：

@font-face {
  font-family: 'MyCustomFont';
  src: url('path/to/my-custom-font.woff2') format('woff2'),
       url('path/to/my-custom-font.woff') format('woff');
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

应用场景

系统字体：适用于需要快速加载且对视觉效果要求不高的场景，如新闻网站、博客等。
自定义字体：适用于需要独特视觉效果和品牌一致性的场景，如品牌官网、广告设计、电子书等。

优势

系统字体：加载速度快，兼容性好，不需要额外的字体文件。
自定义字体：可以提供独特的视觉效果，增强用户体验和品牌形象。

遇到的问题及解决方法

字体加载慢

原因：自定义字体文件较大，网络加载时间长。

解决方法：

使用字体子集化工具减小字体文件大小。
使用font-display属性控制字体加载行为，如swap或fallback。

示例代码：

@font-face {
  font-family: 'MyCustomFont';
  src: url('path/to/my-custom-font.woff2') format('woff2'),
       url('path/to/my-custom-font.woff') format('woff');
  font-display: swap;
}

字体兼容性问题

原因：不同浏览器对字体格式的支持不同。

解决方法：

提供多种字体格式（如WOFF、WOFF2、TTF等）。
使用font-family属性设置多个备选字体。

示例代码：

@font-face {
  font-family: 'MyCustomFont';
  src: url('path/to/my-custom-font.woff2') format('woff2'),
       url('path/to/my-custom-font.woff') format('woff'),
       url('path/to/my-custom-font.ttf') format('truetype');
}

body {
  font-family: 'MyCustom.jsFont', sans-serif;
}