前端页面嵌入 lcd 字体

发表于 | 分类于 | 评论数： | 阅读次数：

前端嵌入 lcd 数字字体

前端如何嵌入字体

这篇文章主要讨论的是如何嵌入数字 lcd 字体.

为了超越“Web 安全字体”的局限，在网页上使用一些用户电脑上不太可能会安装的字体，微软曾率先提出了@font-face 规则。这个规则后来进入 W3C 的 CSS Fonts Module Level 3 模块，于是就有了前端常用的 Web 自定义字体技术：

1
2
3
4
5
6
7
8
9
@font-face {
  font-family: "MyWebFont";
  src: url("webfont.eot"); /* 兼容IE9 */
  src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
      url("webfont.woff2") format("woff2"),
    /* 最新浏览器 */ url("webfont.woff") format("woff"), /* 较新浏览器 */
      url("webfont.ttf") format("truetype"),
    /* Safari、Android、iOS */ url("webfont.svg#svgFontName") format("svg"); /* 早期iOS */
}

当然，上面的代码是几乎可以兼容所有浏览器的方案。大约在两年前，也就是 2016 年，由于浏览器版本的快速更迭，写成下面这样已经是比较现实的了：

1
2
3
4
@font-face {
  font-family: "MyWebFont";
  src: url("myfont.woff2") format("woff2"), url("myfont.woff") format("woff");
}

最终目标 只使用自带压缩格式的 woff2:

1
2
3
4
@font-face {
  font-family: "MyWebFont";
  src: url("myfont.woff2") format("woff2");
}

获取 lcd 字体

到 dafont下载 ttf 格式字体.

筛选条件中选择 lcd,Preview 填入数字 (0123456789),接着下载需要的字体即可.

格式化字体

下载的 ttf 字体需要格式化为 woff/woff2 等字体.
到fontsquirrel.com可以格式化字体.
同时这个网站也可以截取需要的字符来生成字体,例如我下载的 lcd 字体中包含了 数字 0-9 和字母 a-z,但是我只需要 0-9,就可以进行筛选,接着生成自己需要的字体,只包含 0-9 的 lcd 字体的 woff2 文件大概只有 2kb 大小,机会可以忽略了.

css 文件中引入字体文件:

1
2
3
4
5
6
@font-face {
  font-family: "ds-digitalbold";
  src: url("./../font//ds-digib-webfont.woff2") format("woff2"), url("./../font/ds-digib-webfont.ttf")
      format("truetype");
  font-weight: bold;
}

样式用使用

1
2
3
4
5
& p {
  font-family: "ds-digitalbold";
  font-size: 50px;
  color: #ffde00;
}

后记

众所周知，相对于英文字体，中文字体天生是“庞然大物”。英文字体两三百KB已经很大了，而中文字体几MB十几MB都算小的。一方面，中文字体包含的字形数量极多，动辄数以千计甚至万计，而英文字体则只需包含几十个基本字符和符号，哪怕支持多种语言及字符变体，容量达到三千多个字形已经算非常庞大的了。另一方面，中文字形的曲折变化复杂度高，在基于轮廓的矢量字体设计中，用于控制中文字形曲线的控制点普遍比英文更多，因而需要的数据量更大，也会导致字体文件膨胀。
前端开发实践中，为了实现一些特殊视觉效果，经常需要使用某些特殊字体，而用户电脑上几乎不太可能安装这些字体，这时候通常需要使用Web字体技术，让浏览器动态下载我们的自定义字体。可是中文字体非常庞大，很多时候“全量”加载某个字体文件是不现实的。特别是对于一些动态页面且每个页面只有少量字符用到该字体的情况下。当然，也不是每个页面都会用到一个字体文件中的所有字符，全量加载本身也极其浪费。

thank u !