javascript - 前端页面 如何使用外部字体,并把字体文件大小缩小?
背景: 最近在做前端页面的时候 发现和设计图写出来的样子不一样，后来发现是字体不一样。
我这边样式font-family 直接没写用的是默认的。两边字体不一样 直接写出来的样式也不一样
请问有没有什么办法可以直接把字体文件进行压缩，或者有没有什么办法可以把字体引用进来？
共有4个答案
可以使用 fontmin 工具。
6000 字常用中文的思源雅黑，单个字重，字体文件映像中是 1.8MB。对中文字体而言体积很小了。如果你用 fontmin 单独处理页面用到的字，或者和 UI 协商使用图片，能把加载体积减小到几十 kb。
有些ui设计时候用的字体，在不同操作系统、不同游览器里面可能就没有那种字体，导致前端画出来的页面和设计稿字体差异很大
一般解决办法就是，把一些字体文件打包引入到项目，然后使用，但是这样有的字体会有侵权的风险
还有一种办法就是运用font-family这个属性，多设置一些字体，如果没有会依次向后查找。
- 使用外部字体的技术并不复杂，
@font-face引用字体文件即可 - 但是由于中文是象形文字，所以中文字库就会很大，通常 5MB～10MB，用在网页里非常不经济
- 如果只有少数且固定的特殊字体，可以用 字蛛 这样的工具把需要用到的文字提取出来
- 如果无法事先确定文字内容，建议跟产品和设计协商，不要用特殊字体
如何使用外部字体: @font-face
选择字体,可以参考这个文章: 如何优雅的选择字体(font-family)
把字体文件大小缩小,只能在特定场景下实现,比如,设计稿上只需要"特价"二字是特殊的字体,那这种情况下,字体文件就可以非常小,除此之外,做不到把字体文件大小缩小
-
我需要检测字体缩放后文本组件的字体大小。假设我有一个字体大小为18px的文本组件 用户通过操作系统辅助功能设置设置了大字体。现在我的文本已经用更大的字体显示了(超过18px)。我知道我可以使用< code > allowFontScaling = { false } ，但我不想失去文本的可访问性。我看到React native有一个API来获取字体比例< code > pixel ratio .
-
ttf 字体文件已经达到 10M了 ,体积太大了怎么压缩呢，这个项目很多数据是动态的，有什么好的压缩方法吗？
-
所以我开始了一个个人简历网站，我偶然发现了一个非常酷的东西：font awesome，它以文本的形式提供图形，允许你通过CSS添加字体效果。我的问题是一切都很好，直到我试图改变字体大小，无论什么原因，它就是不会改变。你有什么想法吗？我也是新的这里，我已经阅读通过如何使帖子，但如果我做错了，请让我知道。
-
这是我的代码转换从HTML到Word文档。如何设置此word文档的字体大小和字体系列。
-
vscode 注释字体可以缩小么？ 也就是比代码的小一号。 像 idea一样。
-
我需要将给定HTML的字体家族和字体大小更改为特定的字体家族和大小。（例如：Times New Romen，尺寸：12）你知道如何使用Htmlagilitypack来完成吗？ 字体大小可以在给定的HTML中以多种方式定义。例如：使用，也使用样式标记。因此，我需要改变所有特定的字体大小。