html5字体写法-九八云安全

HTML5字体设置方法

基础字体设置（CSS）

属性	说明
`font-family`	定义字体优先级列表，格式：`font-family: "字体1","字体2", generic-family;`
`font-size`	设置字号（建议用`rem`或`px`单位）
`font-weight`	字体粗细（数值400=正常，700=加粗）
`font-style`	字体样式（normal/italic/oblique）

示例代码：

引入Google字体

获取链接：访问Google Fonts选择字体

添加链接标签：

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap" rel="stylesheet">

使用字体：

body {
font-family: 'Noto Sans SC', sans-serif;
}

自定义字体（@font-face）

步骤	说明
准备字体文件	需提供`.woff/.woff2/.ttf`等格式
定义@font-face规则	声明字体名称和文件路径
调用字体	通过`font-family`引用自定义字体名称

示例代码：

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/myfont.woff2') format('woff2'),
       url('fonts/myfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: 'MyCustomFont', sans-serif;
}

字体加载优化

技术	作用
`font-display: swap`	在字体加载期间优先使用系统默认字体，提升渲染速度
预加载字体	使用`<link rel="preload">`提前加载关键字体
分级加载	非关键文本使用通用字体，重要元素使用定制字体

预加载示例：

兼容性处理

字体格式兼容：提供.woff2(现代浏览器)+.ttf(旧版IE)双格式

Unicode范围：通过unicode-range限制字体文件大小（适合中文场景）：

@font-face {
font-family: 'ChineseFont';
src: url('chinese.woff2') format('woff2');
unicode-range: U+4E00-9FFF, U+3400-4DBF; / 覆盖中日韩字符 /
}

相关问题与解答

Q1：如何设置按钮点击时的字体颜色变化？
A1：使用:active伪类配合color属性：

button:active {
  color: #fff; / 点击时文字变白色 /
}

Q2：为什么网页在某些设备上显示方框而不是字体？
A2：可能原因及解决方案：

html5字体写法

字体文件未正确加载 → 检查文件路径和跨域设置
缺少对应字符的Unicode范围 → 扩展unicode-range或更换支持更广的字体
浏览器禁用自定义字体