当前位置：首页 > 行业动态 > 正文

html各种字体名称

HTML常用字体包括宋体、黑体、楷体、仿宋；英文如Times New Roman、Arial等，通过CSS的font-family属性设置，用逗号分隔优先级，建议优先使用网页安全字体（如Arial、Verdana）

CSS字体分类

按字体类型划分

字体类型 特点 常见用途 示例字体
衬线字体（Serif） 笔画末端有装饰 印刷品/正式文档 Times New Roman、Georgia
无衬线字体（Sans-serif） 简洁无装饰 屏幕显示/现代设计 Arial、Helvetica
等宽字体（Monospace） 字符等宽 代码显示/表格对齐 Courier New、Consolas
手写体（Cursive） 模拟手写风格 艺术设计/签名效果 Brush Script、Pacifico
装饰性字体（Fantasy） 特殊造型 标题/广告设计 Impact、Comic Sans

按加载方式划分

类型 特点 使用场景
本地字体 依赖用户系统安装 font-family:"Arial", sans-serif
网络字体 通过@font-face加载 自定义特殊字体
系统字体 操作系统自带字体 -apple-system（iOS）
BlinkMacSystemFont（macOS）

字体族命名规则

  1. 通用字体族：

    • serif（衬线族）
    • sans-serif（无衬线族）
    • monospace（等宽族）
    • cursive（手写族）
    • fantasy（装饰族）

  2. 具体字体名称：

    html各种字体名称 第1张

    • 需精确匹配字体文件名（区分大小写）
    • 建议格式："Helvetica Neue", Helvetica, Arial

  3. 安全字体：

    • Windows：Segoe UI、Tahoma、Verdana
    • macOS：Lucida Grande、Helvetica Neue
    • iOS：-apple-system
    • Android：Roboto、Noto Sans

字体加载技术演进

技术 语法示例 特点
@font-face（传统） css<[@font-face](http://@font-face){src:url('font.woff2');font-family:'MyFont';} 支持多格式
需配置MIME类型
@import（旧版） css<[@import](http://@import) url(font.css); 已过时
存在FOUC风险
link（现代） html<[link](http://link) rel="stylesheet" href="font.css"> 并行加载
推荐使用
preconnect（预加载） html<[link](http://link) rel="preconnect" href="//fonts.example.com"> 优化资源加载速度

常见问题与解决方案

Q1：为什么设置的字体不生效？

A：可能原因及解决方案：

  1. 字体名称拼写错误 → 检查引号和大小写
  2. 字体未加载成功 → 确认@font-face路径正确
  3. 浏览器不支持该格式 → 提供WOFF2/WOFF/TTF多种格式
  4. 被上层样式覆盖 → 使用!important或提高优先级

Q2：如何实现跨平台的字体兼容？

A：最佳实践方案：

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

原理：优先使用系统默认字体，后跟各平台安全字体，最后用通用

HTML
0

相关文章