网上看到很多个人博客使用霞鹜文楷字体(LXGW WenKai),尽显优雅的文字气息,煞是好看。

LXGW WenKai.png

忍不住想用到自己的博客上,霞鹜文楷字体开源免费,是FONTWORKS公司Klee One字体衍生的开源中文字体项目。但我这个NPS服务器宽带有限,又没有用CDN全站加速,上传字体文件自建调用会导致整站变慢。

网上找了方法,添加并不困难,与其他网页字体无异,先引入 Web Font CSS 样式,然后在样式表中设置字体即可。这里介绍一下第三方CDN公共资源调用方法。

一、在网页的标签内适当位置引入字体 CSS。如果你希望使用屏幕阅读优化版本,请使用第二行。第一行为原始字体文件。二者引入其一即可。CSS 镜像地址的源在 cdnjs,代码href链接采用了中国大陆的 BootCDN 的源。如果喜欢其他的cdnjs源,可以替换。

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/lxgw-wenkai-webfont/1.6.0/style.min.css" />
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/style.min.css" />

二、在网站页面的CSS文件中设置字体。根据引入的哪版字体,设置不同的字体名称。同样二选其一即可。

body {
    /* 原版 */
    font-family: "LXGW WenKai", sans-serif;
    /* 屏幕优化版 */
    font-family: "LXGW WenKai Screen", sans-serif;
}

三、在浏览器上按Ctrl+F5,清除浏览器缓存并刷新,即可看到加载的字体效果。

标签: 字体

添加新评论