IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    白嫖党狂喜,两行代码免费使用大厂CDN落霞孤鹜字体

    52txr发表于 2024-04-18 20:32:39
    love 0

    落霞孤鹜字体是一款优美的开源字体,适合用于博客等网站。由于字体文件较大,可能会消耗较多的CDN流量。不过,通过BootCDN提供的免费CDN服务,可以方便地使用该字体而无需担心流量问题。只需在HTML中引入BootCDN上的字体样式文件,并设置字体家族,即可在网站上使用落霞孤鹜字体。BootCDN提供了不同版本的字体,可根据需求选择合适的版本。

    落霞孤鹜字体介绍

    原本说好不再折腾博客字体的,今天在使用阿里巴巴的矢量图标库的时候,下面那个轮播图海报“阿里妈妈·智造体”又让我开始手痒了。点进去看看,里面都是阿里那边的一些开源字体,耐不住好奇心的我就去试了试,发现并不好看。另外一个原因就是字体文件真大啊,至少都是2MB左右的大小,实在有点太烧CDN的流量了。虽然之前写了一篇压缩字体的文章(见文《字体文件太大怎么办?使用Python库fonttools大幅度压缩字体的大小,实现字体几百KB大小》),但是越来越懒的就是不想再去操作这些东西。于是我就又探索了一波,最终还确实发现了不错的字体,最重要的是不要花自己的CDN的流量。

    霞鹜文楷个人觉得特别适合博客类网站,其实具体也分很多细分:

    • 霞鹜文楷屏幕阅读版 / LXGW WenKai Screen:适用于 PC 和 Android 手机屏幕显示且无需特别切换到粗体。
    • 霞鹜文楷 轻便版 / LXGW WenKai Lite:与完整版相比剔除一些较不常用的字符,便于开发者将字体嵌入软件中。
    • 霞鹜文楷 GB / LXGW WenKai GB:进一步调整字形和笔形,符合 G 源字形规范。

    落霞孤鹜字体

    BootCDN的字体库

    BootCDN是Bootstrap 中文网支持并维护的前端开源项目免费 CDN 服务,致力于为 Bootstrap、jQuery、Angular、Vuejs 一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。

    字体库网站链接:BootCDN - lxgw-wenkai-webfont

    BootCDN的字体库

    为博客换字体

    需要说明的是,小陶个人比较喜欢霞鹜文楷屏幕阅读版,加粗后的「霞鹜文楷」与 Segoe UI Regular 粗细相当,PC 和 Android 手机屏幕阅读更加舒适。如果需要别的版本,可以在BootCDN的字体库找找改改就行。

    首先,引入css文件:

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

    如果是handsome主题,可以添加到自定义输出head 头部的HTML代码:

    引入css文件

    然后添加一个CSS应用网站里即可:

    body {
        font-family: "LXGW WenKai Screen", sans-serif;
    }

    如果是handsome主题,把这个代码放到自定义CSS中:

    CSS应用网站

    最后的效果如我的网站所示(2024.04.18,后面可能又折腾别的去了)



沪ICP备19023445号-2号
友情链接