..

霞鹜文楷 WebFont V1.250发布(附特定字符无法显示的解决方案)

前段时间,知名中文开源字体霞鹜文楷发布了v1.250版本。然而,很多用户仍然在使用1.235甚至更陈旧的webfont版本。我已经重新编译了最新的WebFont版本。并将它托管在了我自己的CNDC的服务器上。

  • 发布最新版本
  • 提供下载链接

原理

中文的字体调用一直都是一个让人伤脑筋的问题。曾经使用TTF文件来启用字体,然而这会带来极大的带宽需求。需要将整个TTF文件下载到本地。一个TTF小有15M,大则有30多M,十分的不便。

然而经过一段时间的研究,一些前端工程师发现中文字体可以通过切分Unicode区域,并将每个区域对准到每一个woff文件作为子集,以次来实现按需调用,极大减少了带宽需求。代价是这种字体(WebFont)需要专门构建。

本文中的WebFont代码库源自 https://github.com/chawyehsu/lxgw-wenkai-webfont 这个项目被LXGW官方作为其网站的WebFont库。本文的构建采用了仓库内提供的 update.py

构建步骤

尽管我已经构建并会在文章末尾发布WebFont的在线调用和下载链接,学会构建还是很重要的——而且这并不困难,还很简单。只需要稍微更改几个设置就可以确保你正在使用最新的WebFont支持。

第一步,安装Python (IDLE编辑器,如果你需要)并从刚刚给出的仓库链接下载 / Clone这个项目。解压并进入文件夹。

第二步,安装依赖。确保在项目文件夹下,打开命令行工具,执行这个命令(对于Linux和Windows不会有太大差别)

pip3 install -r ./requirements.txt

第三步,您可以在命令行中完成(只针对Linux),或者在Windows中通过IDLE完成。

如果您是在命令行中完成,请执行这个命令;${您要构建的字体包名} 等同于"lxgw-wenkai-webfont",“lxgw-wenkai-tc-webfont”,“lxgw-wenkai-lite-webfont”,“lxgw-wenkai-screen-webfont"其中任意一者。它们分别对应:标准的霞鹜文楷,繁体版,轻量版,以及屏幕阅读优化版。其中轻量版删除了一些“不必要的”字符,因此不推荐,可能会造成一些非常用字无法正常显示。

python3 ./update.py --package ${您要构建的字体包名}

如果您使用Windows系统,那么您大概需要使用IDLE对文件代码作出一些修改。请定位到 update.py的172行,将 if "--package" in args:修正为 if True:,同时再将173行修改为 package = "${您要构建的字体包名}"在这之后,您可以开始Run Module (按下 F5键)

构建将耗费相当数量的系统资源,并可能造成其他应用运行缓慢。这是因为这个过程本质上是一个压缩+切割文件。

[scode type=“lblue”]为了保障您服务的SLA,请不要在生产环境的服务器上构建字体文件。您应当在本地完成构建后将竣工的字体文件上传到远端。[/scode]

使用构建成品

在您完成了构建后,请打开到 packages/${您要构建的字体包名},并将该文件夹下除了 sources文件夹的文件上传到CDN / 远端。然后按照Google Fonts的形式配置调用。在HTML Head当中,它看起来会像这样:

<link href="${您服务器上的地址}/style.css" rel="stylesheet" />

在Head中添加了这样的引用后,您将可以在任何随后的css中定义字体。譬如对全站启用霞鹜文楷标准字体,您需要在引用后添加这样的CSS:

body{
	font-family: "LXGW WenKai";
}

您还可以设置字体Fallback规则等。这可能对修复特定字符无法显示有重要帮助。

控制使用的字体,需要使用各自特定的 font-face,它们各自都对应着一个特定的字体。LXGW WenKai对应着霞鹜文楷的标准版本,而 LXGW WenKai Mono(本站使用的字体)对应着霞鹜文楷的等宽版本(常见于展示代码)

使用本站的托管

本站的托管也可以工作。

本站的 style.css地址是 https://cndc.helim.net:5244/d/zerospeedyDC1/static/lxgw-fonts-v1.250/style.css

特定字符显示异常

特定字符显示异常是一个诡异的错误。本站就遭遇了这个问题。

我现在正在使用的笔名是“堾荷甃”,没有意外的话,这三个字得益于霞鹜文楷庞大的字库,应该能够正常显示在您的设备上。然而事实是,在调试过程中,“堾”字一直遇到显示困难。稍后我进行了研究,发现如果使用这样的CSS,这个问题就会被修复:

@font-face{
font-family: FixingMissing;
src: url(${到TTF文件的地址});
}
body{
font-family: "LXGW WenKai Mono", FixingMissing, sans-serif;
}

是的,我通过CSS让在 LXGW Wenkai Mono这个Webfont字体中找不到的字Fallback到 FixingMissing对应的完整TTF文件中去找——听起来这样会拖慢速度,而且得不偿失,因为为了显示一个字要下载15M的文件。

然而稍后经过实际测试,发现通过 F12开发者工具的请求分析中,浏览器并没有真的请求那个TTF,然而让人诧异的是“堾”字却能够正确显示了!

然后,我就发现我高兴的太早了。用这样的方法,在清空了缓存之后,重新请求,又开始下载文件了!然后发现是我的远端直接走了内网才导致看起来很快。

所以现在本站采用了这样的解决方法,把名字用图片形式打出来!然后在不能放行内图片的地方用Helium Lee代替。

经过检查,只有堾一个字受到这种错误的困扰。如果有哪位专业人士能解答,烦请在评论区发表出来,感激不尽!

更新:功夫不费有心人

经过苦思冥想,我终于在没找到任何文档的情况下找到了解决方案:需要修改unicode.json,这个文档规定了切分Unicode子集的规则!

你需要添加显示错误的字符的Unicode编码,然后重新编译!比如堾的Unicode编码是U+583e!那要添加进去,update.py才会编译进去!

©️ 2017-2023 Helim Lee, running on HeliNetTM 4Charges(PPNN) "LocalHost" Server.
“荷岭网居”中文名称不是受完全保护的商标。“荷岭”是一处地名,任何人皆可正当使用。