钧言极客钧言极客

钧言极客

网站使用自定义字体及加载优化

在网站建设过程中,很多时候我们不希望使用默认的字体而使用更加个性化的字体,它能使网站的字体显示更加丰富多样,而这种字体是本地系统所没有的内置字体,使用css的@font-face 属性在网页中嵌入自定义字体成为最佳选择。

字体下载

这里推荐使用有字体,注册就能使用自带CDN加速,如果在网上下载的字体,通常只有一种格式需要进行字体转换为浏览器所识别格式。

CSS声明使用该字体

@font-face {
font-family: "Normal";
src: local('PingFang SC'),local('Hiragino Sans GB'),local('Microsoft YaHei'),
url(/blockdole.woff2) format("woff2"),
url(/blockdole.woff) format("woff"),
url(/blockdole.eot) format("embedded-opentype"),
url('/Normal.ttf') format('truetype'),
url('/Normal.svg#Normal') format('svg');
font-display: swap;
}

全局使用

body {font-family: Normal!important;}

在需要到地方调用,比如在footer底部使用自定义字体

.footer p{
font-family: ‘Normal!important’;
}

  • font-family 表示自定义字体名称
  • .WOFF 或 .WOFF2 格式字体,适用于各大主流浏览器
  • .TTF 或.OTF 格式字体,适用于 Firefox 3.5、Safari、Opera 浏览器
  • .EOT 格式字体,适用于 Internet Explorer 4.0+浏览器
  • .SVG 格式字体,适用于 Chrome、IPhone 浏览器

字体沾染优化

font-display: swap;

swap告诉浏览器使用字体的文本应立即使用系统字体显示。自定义字体准备好后,它将替换系统字体。避免显示隐形文字。

字体加载优化

使用提前预加载,可以用于更早的获取到字体文件。需要在网站haed头部中插入一下字体外链代码。

<!-- laod fonts -->
<link rel="preload" href="/Normal.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/Normal.woff" as="font" type="font/woff2" crossorigin>

crossorigin属性表示允许接受不同CROS域请求资源,如果不设置浏览器可能会把预加载字体忽略掉,如果字体放在本地,可以不用设置。

as = "font" type =" font / woff2" 属性告诉浏览器以字体形式下载此资源。

未经允许不得转载:钧言极客 » 网站使用自定义字体及加载优化

评论 抢沙发