一行代码搞定，前端全局修改自定义字体极速体验

本文主要是介绍一行代码搞定，前端全局修改自定义字体极速体验，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

最近客户要求H5端使用Helvetica字体，由于对自定义字体之前不是很了解。
于是度娘了一下，发现Helvetica字体并不是随随便便就能使用的，如果系统本身就是使用的Helvetica 字体，那么font-family指定Helvetica 即可。
如果没有的话就要想办法把Helvetica 字体库文件导入到项目中来。

我们一般定义字体，是这样的：

body {font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
}

这是淘宝的字体设置，我们来分析一下

首先使用 tahoma 作为首选的西文字体，小字号下结构清晰端整、阅读辨识容易；
如果用户电脑未预装 tohoma，则选择 arial 作为替代的西文字体，覆盖 windows 和 MAC OS；
Hiragino Sans GB 为冬青黑体，首选的中文字体，保证了 MAC 用户的观看体验；
Windows 下没有预装冬青黑体，则使用 ‘\5b8b\4f53’ 宋体为替代的中文字体方案，小字号下有着不错的效果；
最后使用无衬线系列字体 sans-serif 结尾，保证旧版本操作系统用户能选中一款电脑预装的无衬线字体，向下兼容。

那么下面是我们自定义的字体：

@font-face {font-family: 'topWebfont';font-display: swap;src: url('ttf文件或者eto文件绝对路径'); 
}

如果想使用我们自定义的字体，那么只需要

  body {font-family: 'topWebfont', tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
}

把我们自定义字体的名称加入到第一位即可。
但是涉及到授权问题，如果你的项目是商用的，为了避免吃官司，不建议这样使用。
那么我们最好的解决方法是什么呢？
跟上面一样，优先使用Helvetica字体即可：

 body {font-family: Helvetica, tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
}

这样如果系统本身就有Helvetica字体，那么就会优先使用。

上面我们说了一种自定义字体的方式，把字体库下载下来，导入到项目中，代码中设置路径等等，是不是稍微有点麻烦呢？
这里再介绍一种方式，那就是阿里图标库在线字体
https://www.iconfont.cn/webfont?spm=a313x.7781069.1998910419.d81ec59f2#!/webfont/index

具体怎么使用呢，很简单

在这里插入图片描述

在这里插入图片描述
在页面中选择想用的开源字体库，复制对应字体库代码，这里推荐引用线上代码，到项目中即可。
需要注意的是：最上面的输入框中的内容，就代表了你要使用该字体库的中文，所以如果你想在项目中全部应用中文，那么只需要把项目中所有的中文复制到这里面，生成在线地址即可。

@font-face {font-family: 'webfont';font-display: swap;src: url('//at.alicdn.com/t/webfont_h2zl27npwtp.eot'); /* IE9*/src: url('//at.alicdn.com/t/webfont_h2zl27npwtp.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('//at.alicdn.com/t/webfont_h2zl27npwtp.woff2') format('woff2'),url('//at.alicdn.com/t/webfont_h2zl27npwtp.woff') format('woff'), /* chrome、firefox */url('//at.alicdn.com/t/webfont_h2zl27npwtp.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('//at.alicdn.com/t/webfont_h2zl27npwtp.svg#Alibaba-PuHuiTi-Regular') format('svg'); /* iOS 4.1- */
}body {font-family: 'webfont', tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
}

如果你的项目中的中文比较分散，没有单独在一个文件中，那么可以使用常用的汉字复制生成应该也可以满足需求，常用汉字大概有3500左右（常用3500中文）。

使用这种方式，是不是很简单呢？

在这里插入图片描述