Blogger Information
Blog 91
fans 0
comment 0
visits 77272
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
如何优雅地解决平台字体适应问题
编程三昧
Original
821 people have browsed it

字体.001

前言

对于一套好看舒适的前端设计方案,风格统一是基本要求,其中必然包括字体的统一。

由于国产化进程的不断推进,冒出了不少基于 Linux 的国产操作系统,这就导致我们平时在 windows 上使用得好好的字体,在这些国产操作系统上就失效了,其原因是这些操作系统上没有安装对应的字体。

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

现象

某客户在某国产系统上运行我们的项目时,脚本编辑器中出现了光标错位的问题。

分析

我们的项目中用到了 ace_editor 脚本编辑器,通过阅读源码得知,它在计算光标位置时,依靠的是字体宽度,这就要求必须使用等宽字体才行,否则,会因计算位置错误而引起光标错位。

引起上述现象的原因,说白了就是客户所使用的的操作系统中,没有安装我们项目脚本编辑器所需要的字体。

CSS 字体知识

熟悉 CSS 的同学应该都知道,我们可以通过 CSS 引入字体文件并定义字体名称,比如:

  1. // font.css
  2. /* 定义字体名称、引入等宽字体文件 */
  3. @font-face {
  4. font-family: "bianchengsanmei";
  5. src: url("./font/bianchengsanmei.ttf");
  6. }
  7. /* 使用字体 */
  8. .div{
  9. font-family: "bianchengsanmei";
  10. font-size: 14px;
  11. font-weight: normal;
  12. }

解决方案

针对上述问题,我们的解决方案包括以下步骤:

第一步:在网上下载等宽字体文件,在这里我们选择的是 JetBrainsMono 字体;

第二步:挑选合适的字体文件,本文中选择的是 JetBrainsMono-Regular.ttf

image-20220128160112785

第三步:将 JetBrainsMono-Regular.ttf 拷贝至 ./css/font/ 路径下,并在 CSS 文件中引入和使用:

  1. // ./css/font.css
  2. /* 定义字体名称、引入等宽字体文件 */
  3. @font-face {
  4. font-family: "JetBrainsMono-Regular";
  5. src: url("./font/JetBrainsMono-Regular.ttf");
  6. }
  7. /* 使用字体 */
  8. .div{
  9. font-family: "JetBrainsMono-Regular";
  10. font-size: 14px;
  11. font-weight: normal;
  12. }

结果

刷新页面后,重新测试,发现脚本编辑器中的字体显示为等宽字体,且光标位置也显示正常,问题得到解决。

总结

以上的解决方案应该是最常见最普遍的字体问题解决方案,以后遇到类似的问题都可以参考这个解决。

~

~ 本文完,感谢阅读!

~

学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!

大家好,我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post