当前位置：首页 > CSS

css制作字体

2026-04-01 04:17:57CSS

使用CSS自定义字体的方法

引入外部字体文件 通过@font-face规则引入自定义字体文件（支持WOFF/WOFF2/TTF格式）：

css制作字体

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

应用自定义字体 在需要使用的元素上指定font-family：

css制作字体

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

使用Google Fonts等在线字体服务

直接通过<link>标签引入：

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

或使用CSS导入：

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

字体样式控制属性

font-size: 控制字号（px/em/rem）
font-weight: 字重（100-900或normal/bold）
font-style: 斜体（italic/oblique）
line-height: 行高
letter-spacing: 字符间距
text-transform: 大小写转换（uppercase/lowercase/capitalize）

字体优化建议

优先使用WOFF2格式（压缩率更高）
添加font-display: swap避免布局偏移
限制字体变体数量以减少加载时间
为特殊字符添加unicode-range描述符

示例：完整字体样式定义

h1 {
  font-family: 'CustomFont', Arial, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-transform: capitalize;
}