Skip to main content

引入外部字体

基本使用​

一般浏览器常用的字体包括：宋体、黑体、微软雅黑等几种。因为网页载入选择字体时候是调用访问者系统文字库的文字字体，如果没有找到字体那将显示默认的网页字体。而每个人安装的操作系统默认有这几种字体，所以这些字体又称为安全字体。但为了一些特殊的需要，显示有个性化的、好看的文字样式，我们可以引用一些外部字体。

font-family指定字体​

font-family属性就是可以用css代码设置页面上文字显示的字体样式，例如：宋体，微软雅黑等等。font-family属性设置不同的字体，可以让页面显示效果更协调美观。

font-family 属性可以定义多个值（字体），用逗号隔开。如果浏览器不支持第一个字体，则会尝试下一个，直到有一个可识别的。浏览器会使用它可识别的第一个值。

.class "测试文字"
.class {
    font-family: 'Quicksand', sans-serif;
}

​ 以上代码定义了两个字体，如果其中一个不生效，则会自动使用下一个，如果两个都不生效，浏览器最终会采用默认字体。

@font-face引入外部字体​

@font-face 允许您在网页中使用电脑中没有安装的字体，完全摆脱安全字体的限制。

只需将字体包安装在服务器上，当用户加载网页时，字体包会自动下载到用户机器上，保证字体能够正确渲染。

@font-face {
  font-family: 'Quicksand'; /* 字体的名称 */
  font-style: normal;    
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/quicksand/v30/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58m-wi40.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* 使用自定义的字体 */
.class {
    font-family: 'Quicksand';
}

字体支持​

随着@font-face 的不断流行，产生了许多新的字体格式图标集，称为网络字体。这些网络字体较平常的安全字体有以下的优点：

  • 使用的是真正的文本，而不是图片，放大和缩小都不会影响渲染效果，用户体验好；
  • 可以被搜索引擎辨认；
  • 不像图片每次需要重新生成，添加删除更方便。

image-20221122105016894