gpt4 book ai didi

performance - @font-face unicode-range 属性

转载 作者:行者123 更新时间:2023-12-05 09:24:54 29 4
gpt4 key购买 nike

在一些 html 文档中,我只为几个单词使用了 webfonts。在性能方面加载完整的字体文件似乎很浪费。这是 @font-face 声明的 unicode-range 参数的来源:

http://www.w3.org/TR/css3-fonts/#unicode-range-desc

有了它,我应该可以定义要加载的字体文件的哪些字符,从而大大提高性能。但我就是无法让它工作。奇怪的是,它会显示 firefox 中的所有字符,并且即使我在声明中包含 unicode-range 参数,它也无法在 safari 中加载字体。任何帮助将不胜感激,下面是我用来测试它的 html:

<!doctype html>
<html lang="en">
<head>
<style text="text/css">
@font-face {
font-family: 'dream';
src: url(Fonts/Digital-dream/DIGITALDREAM.ttf) format("truetype");
unicode-range: U+FF21;
}

*{
font-family:dream;
font-weight:normal;
}
</style>
</head>
<body>
<p>ASDWEWQDSCF</p>
</body>
</html>

最佳答案

您误解了该值的用途。从该页面:

This descriptor defines the range of Unicode characters supported by a given font

所以这不是要下载的字形(或字符),这实际上是告诉浏览器字体中有哪些字符,以便浏览器可以确定它是否值得首先下载字体。如果设置样式的文本不在给定的 unicode-range 中,则不会下载该字体。

您引用的页面上的示例 XIII 显示了一个很好的示例。假设 3 个 @font-face 规则共享相同的 font-family 属性。然而,第一条规则指向一个巨大的 4.5MB TTF 文件,其中包含所有可能需要的字形。第二条规则列出了一个小得多的 1.2MB TTF,但表示仅当所有字符都适合日文字形范围时才使用它。第三条规则列出了一个非常小的 190KB 文件,如果样式文本仅为罗马字体,则可以下载该文件。

关于performance - @font-face unicode-range 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7841844/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com