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

html5字体常规

HTML5中常规字体设置通过CSS实现，使用 font-family指定字体族（如 Arial, sans-serif）， font-weight控制粗细， font-size定义大小，可通过 @font-face引入自定义字体，需注意跨浏览器兼容性，优先

字体族选择与优先级

HTML5通过font-family属性设置字体族，优先使用用户设备已安装的字体,最后指定通用字体族作为回退方案。

html5字体常规 第1张

body {
  font-family: "Arial", "Helvetica", sans-serif;
}
优先级 字体名称 说明
1 “Arial” 首选字体（需用户设备安装）
2 “Helvetica” 次选字体（macOS系统常见）
3 sans-serif 通用字体族（最后保障）

字体大小与单位

  • 绝对单位：px（像素），如 font-size: 16px，固定尺寸,不受父元素影响。
  • 相对单位：
    • em：相对于父元素字体大小（如 5em 表示父元素的1.5倍）。
    • rem：相对于根元素（<html>）的字体大小（如 1rem = html的font-size）。
  • 推荐实践：使用rem实现全局统一的响应式设计。

颜色设置方式

方法 示例 适用场景
十六进制 color: #333; 精确配色
RGB/RGBA color: rgba(51,51,51,0.8); 透明度控制
HSL/HSLA color: hsla(0,0%,33%,0.7); 色相调整更直观

文本样式控制

  • 粗细：font-weight（数值400=正常，70=加粗）。
  • 斜体：font-style: italic; 或 font-style: normal;。
  • 行高：line-height: 1.6;（推荐用无单位数值，基于当前字体大小）。

语义化标签默认样式

默认字体大小 默认粗细 用途
<h1> 2em 700
<h2> 5em 700
<p> 1em 400 正文段落
<button> 1em 400 交互按钮

相关问题与解答

问题1：如何确保中文网站在不同设备上的字体兼容性？

解答：

  1. 优先使用系统自带中文字体（如"PingFang SC"、"Microsoft YaHei"）；
  2. 通过@font-face加载自定义字体时，提供多格式文件（如.woff、.ttf）；
  3. 设置合理的字体回退方案， 
    body {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

问题2：为什么推荐使用rem而非px设置字体大小？

解答：

  • rem基于根元素字体大小，可统一调整全局比例（如用户偏好设置或响应式布局）；
  • px为固定值，在复杂嵌套结构中可能导致计算混乱；
  • 示例：若html的font-size: 16px，则1rem = 16px，5rem = 24px
HTML
0

相关文章