如何在已有font-family属性下优雅地添加自定义字体？

嘿，朋友啊，之前有个项目，搞网站的时候，那叫一个头疼啊。
字体问题，简直是我的心头大患。
记得那年我在北京，那字体乱七八糟的，要兼容各种浏览器，还要保证好看，真是累死我了。

那时候我就用了这个方法，用JavaScript动态修改font-family，保住了我的头发。
其实操作也不复杂，就是在CSS里用@font-face声明自定义字体，然后在JavaScript里把自定义字体加到目标元素的font-family前面去。
这样既保留了原来的字体设置，又让自定义字体优先显示。

比如这样写：
javascript const el = document.body; // 这里可以替换成任意目标元素 const prevFontFamily = getComputedStyle(el).getPropertyValue('font-family'); el.style.fontFamily = 'my-custom,' + prevFontFamily;
这代码的意思是，先获取目标元素的font-family值，然后把自定义字体名my-custom加到前面，这样自定义字体就优先显示了。

我当时用这个方法的时候，发现兼容性简直好到飞起，而且不需要改CSS文件，维护起来方便多了。
不过，要注意一点，如果自定义字体加载慢，可能会导致页面上的文字先显示成默认字体，然后才慢慢变成自定义字体，看起来会有点不自然。
这时候，你可以在@font-face规则里加上font-display: swap;，这样在自定义字体加载期间，页面上的文字会先显示为默认字体，等自定义字体加载完毕后再替换。

这块儿我亲身体验过，确实挺有用的。
不过性能优化这块儿，我觉得还是得根据实际情况来，比如对于频繁操作的元素，可以缓存一下getComputedStyle的结果，这样效率会更高。

总之，这个方法挺实用的，至少在我那会儿是救了我。
嘿嘿，如果你有类似的问题，也可以试试这个方法哦。

CSS字体如何引入_CSS引入自定义字体方法教程

直接说，CSS用@font-face加自定义字体最关键要考虑兼容性和版权。

说白了，@font-face就是定义个字体名，然后告诉浏览器去哪找字体文件。
比如这样： css @font-face { font-family: 'MyFont'; src: url('fonts/myfont.woff2 ') format('woff2 '), url('fonts/myfont.woff') format('woff'); }
重点看src那块，文件路径和格式要写对。
浏览器会按顺序试加载，没找到就用备选的。

格式这块，首选WOFF2 ，压缩率高。
老浏览器不支持就用WOFF，最老的IE9 以下可能要EOT。
具体顺序不能错，性能最好的放前面。

版权千万不能忘！免费字体不一定能商用，得看许可。
像Adobe Fonts那种肯定要付费。
Google Fonts有些免费但商用要申请。

你用Google Fonts试试？

CSS字体引入外部字体如何操作_CSS字体引入外部字体教程

直接用@font-face引入外字体。

先整字体文件。
用.woff2 格式，备个.woff和.ttf的。
工具用FontForge。

定义规则。
写CSS @font-face，给字体起名，写路径，写格式，写字重和样式。
用url('fonts/myfont.woff2 ')这种。
加font-display:swap。

用起来。
body{font-family: 'MyCustomFont', sans-serif}。

注意路径。
用相对路径，比如fonts/myfont.woff2 用浏览器Network看加载。

跨域问题。
服务器加Access-Control-Allow-Origin头。

兼容性。
备几种格式。
写对font-weight和font-style。

排查问题。
字体名大小写得一样。
旧版IE只能用.eot格式。
清缓存。

优化性能。
用font-display:swap。
用<link rel="preload" href="fonts/myfont.woff2 " as="font" type="font/woff2 " crossorigin>提前加载。
子集化字体。
压缩文件。

或者用在线字体。
比如GoogleFonts，复制<link>标签。
AdobeFonts也行。

你自己掂量。