关于网页中文那点事-网页前端显示指定中文字体

网页浏览器支持的主流字体大概这几种：woff、woff2、otf、ttf、svg，另外还有eot。svg主要使用ios设备。前台网页代码显示中文字体是下面两个种方案：

服务器上传指定的字体，网页中通过font-family来直接添加
采用第三方CDN提供的现有字体，通过css引用

各有优缺点，第一种字体可以自己上传自己喜欢的任意字体调用显示，但是占用服务器性能，对于个人博客这样的配置不高的服务，则显示会出现加载时间过长，对部分位置连接的则会出现更大的延迟。第二种通过cdn则可以快速调用，速度响应快，且不同位置显示速度并没有太大差距，缺点是只能引用已存在的一些字体。

备注：一个需要注意的地方，就是使用了本地自定义强制某种字体显示页面的css后，需要在css中将引用改字体的class进行排除，否则看不到效果。

一、服务器上传字体

通过font-family来引用。在css头部定义：

@font-face {
font-family: "自定义名称"; /*名称任意*/
font-weight: 400; /*字体粗细*/
src: 
url("字体的位置，本地的可以采用/相对位置来引用，其他服务器上通过绝对地址来引用。") format("字体格式，一般有woff,woff2,truetype,eot等等，网页推荐woff或者woff2"),
url("第二种格式地址，比如上面是woff2，下面可以设为woff，提高兼容性") format("格式2");
font-display: swap;
}

然后在css中或者是html中直接可以定义如下：

.userfont_class{
font-family:"自定义名称"; /*与上面定义的名称一致就可以*/
}
/*或者在html中直接引用*/
<span style="font-family:自定义名称;">网页内容</span>

保存后刷新网页就可以看到，当然这个第一次会有一个加载的过程，加载的时间视乎字体文件体积大小。如果没改变，可以用Ctrl+F5（Windows系统）或者Command+R（Mac系统）来强制刷新页面。

二、通过cdn提供的现有连接来直接引用。

cdn也有两种方式，一种就是直接提供类似上面@font-face这样的代码段给你，其中url已经指定为他们提供的字体地址，另一种是提供css文件地址来link。第一种跟上面一样就不赘叙，第二种是在首页的html的<head>段中添加css，然后在css或者html中添加指定的font-family，例如霞婺文楷开源字体的Lite版本和screen屏幕版：

/*在head中添加css链接*/
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-lite-webfont@1.1.0/style.css" /> 
<link rel="stylesheet" href="https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0 />

/*然后在css中定义如下*/
.post-xwwk-lite{
    font-family: "LXGW WenKai Screen" !important;
}
.post-xwwk-scr{
    font-family: "LXGW WenKai Screen" !important;
}

/*或者在html中直接引用*/
<span style="font-family:LXGW WenKai Screen;">网页内容</span>

这里面的font-family就不能自定义，只能根据他们提供的名称来写，因为在css中他们已经定义好了。

三、现有一些cdn的链接记录：

1、阿里巴巴的字体库：https://www.iconfont.cn/fonts/index?spm=a313x.7781069.1998910419.15

阿里巴巴的字体库提供免费商用，比较适合数字较少做标题之类的，他的原理应该是根据你提供的文本仅下载包括这些文本的woff和woff2格式，这个体积就非常小。做正文基本上不太现实。

2、霞婺文楷开源：https://github.com/lxgw/LxgwWenKai ，

网页格式根据官方提供的信息：

 <html>
<head>
  <link rel="stylesheet" href="https://cdn.staticfile.org/lxgw-wenkai-webfont/1.6.0/style.css" />
  <!-- 没有Lite version, 有需要的可以向cdnjs发pr看看能不能通过-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-lite-webfont@1.1.0/style.css" />
  <!-- 没有TC version, 有需要的可以向cdnjs发pr看看能不能通过-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-tc-webfont@1.0.0/style.css" />
  <!-- Screen version -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/style.css" />
  <style>
    body {
      font-family: "LXGW WenKai", sans-serif;
      /* Lite version */
      font-family: "LXGW WenKai Lite", sans-serif;
      /* TC version */
      font-family: "LXGW WenKai TC", sans-serif;
      /* Screen version */
      font-family: "LXGW WenKai Screen", sans-serif;
    }
  </style>
</head>
<body>
  <!-- blablabla -->
</body>
</html>

最新文章

标签