乐趣区

关于前端:如何优雅地解决平台字体适应问题

jiezi

前言

对于一套难看舒服的前端设计方案，格调对立是根本要求，其中必然包含字体的对立。

因为国产化过程的一直推动，冒出了不少基于 Linux 的国产操作系统，这就导致咱们平时在 windows 上应用得好好的字体，在这些国产操作系统上就生效了，其起因是这些操作系统上没有装置对应的字体。

在这里，我就记录一下最近解决字体问题的一次过程。

景象

某客户在某国产零碎上运行咱们的我的项目时，脚本编辑器中呈现了光标错位的问题。

剖析

咱们的我的项目中用到了 ace_editor 脚本编辑器，通过浏览源码得悉，它在计算光标地位时，依附的是字体宽度，这就要求必须应用等宽字体才行，否则，会因计算地位谬误而引起光标错位。

引起上述景象的起因，说白了就是客户所应用的的操作系统中，没有装置咱们我的项目脚本编辑器所须要的字体。

CSS 字体常识

相熟 CSS 的同学应该都晓得，咱们能够通过 CSS 引入字体文件并定义字体名称，比方：

// font.css
/* 定义字体名称、引入等宽字体文件 */
@font-face {
    font-family: "bianchengsanmei";
    src: url("./font/bianchengsanmei.ttf");
}

/* 应用字体 */
.div{
    font-family: "bianchengsanmei";
    font-size: 14px;
    font-weight: normal;
}

解决方案

针对上述问题，咱们的解决方案包含以下步骤：

第一步 ：在网上下载等宽字体文件，在这里咱们抉择的是 JetBrainsMono 字体；

第二步 ：筛选适合的字体文件，本文中抉择的是 JetBrainsMono-Regular.ttf：

第三步 ：将 JetBrainsMono-Regular.ttf 拷贝至 ./css/font/ 门路下，并在 CSS 文件中引入和应用：

// ./css/font.css
/* 定义字体名称、引入等宽字体文件 */
@font-face {
    font-family: "JetBrainsMono-Regular";
    src: url("./font/JetBrainsMono-Regular.ttf");
}

/* 应用字体 */
.div{
    font-family: "JetBrainsMono-Regular";
    font-size: 14px;
    font-weight: normal;
}

后果

刷新页面后，从新测试，发现脚本编辑器中的字体显示为等宽字体，且光标地位也显示失常，问题失去解决。

总结

以上的解决方案应该是最常见最广泛的字体问题解决方案，当前遇到相似的问题都能够参考这个解决。

~

~ 本文完，感激浏览！

~

学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！

大家好，我是〖编程三昧〗的作者 隐逸王 ，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！

退出移动版