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

html文字字体

admin
行业动态
2025-04-30
2

HTML文字字体通过CSS设置，常用 font-family指定字体族，` 或`标签结合样式定义，或用@font-face引入自定义字体，也可调用Google Web Font

基础字体设置

HTML中可通过多种方式设置文字字体,常见方法如下：

HTML标签直接设置

html文字字体第1张

<font face="宋体">这是宋体文字</font>

<font>标签已过时，不建议使用
face属性指定字体名称

CSS基础属性

p {
  font-family: "微软雅黑", Arial, sans-serif;
}

通过font-family设置字体族
建议按优先级排列备选字体

CSS字体属性详解

属性	说明
font-family	指定字体系列，可设置多个备选字体
font-size	设置字号大小（px/em/rem/pt等单位）
font-weight	设置字体粗细（normal/bold/bolder/lighter或100-900数值）
font-style	设置字体样式（normal/italic/oblique）
font-variant	设置小型大写字母等特殊变体（normal/small-caps）
line-height	设置行高（数字/长度单位）
font-stretch	拉伸变形（ultra-condensed到expanded共11个等级）

字体加载与自定义

@font-face规则

@font-face {
  font-family: 'CustomFont';
  src: url('fonts/custom.woff2') format('woff2'),
       url('fonts/custom.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

定义自定义字体族
需提供多种格式文件（.woff/.woff2/.ttf等）

外部字体加载

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC" rel="stylesheet">
<style>
  body {
    font-family: 'Noto Sans SC', sans-serif;
  }
</style>

使用在线字体库（如Google Fonts）
需通过HTTP请求加载字体文件

兼容性处理

浏览器	注意事项
IE9以下	不支持@font-face，需使用.eot格式字体
移动端	优先使用.woff2格式，压缩字体体积
跨域问题	自建字体服务器需配置Access-Control-Allow-Origin头
性能优化	使用unicode-range限定字符范围，减少字体文件大小