gpt4 book ai didi

html - CSS 高级 OTF 功能不起作用

转载 作者:行者123 更新时间:2023-11-28 12:52:27 26 4
gpt4 key购买 nike

我有以下 HTML + CSS 源代码。我希望它使用高级 otf 功能,但样式集功能不起作用。

<style>
body { font-family: source sans pro; font-size:12px }
.advotf { -moz-font-feature-settings: "ss01" 1; -moz-font-feature-settings: "onum" 1; }
</style>
<body>
<p>Regular 1234567890</p>
<p class="advotf">advanced 1234567890</p>
</body>

另外,我电脑上包含这些功能的免费字体无论如何都无法使用。

最佳答案

涉及到几个问题:

  1. Support to OpenType features 在浏览器中是有限的,为了获得最好的覆盖率,你应该使用 -webkit- 前缀版本和(对于 IE)除了 - moz- 前缀版本。
  2. 属性设置不是累积的。根据一般的 CSS 原则,当一个规则包含一个属性的多个设置时,只有最后一个生效。您需要将这些设置合并到一个声明中。
  3. 尽管 Source Sans Pro 具有多项 OpenType 功能,但 Google 托管的版本不支持这些功能。这是 Google 字体的普遍问题。
  4. 虽然 FontSquirrel @font-face generator 具有启用 OpenType 功能的专家设置,但这并不意味着启用它们以与 CSS 属性一起使用。相反,他们将设置硬连接到字体文件中。因此,例如,您可以生成启用 onum 的 Source Sans Pro 字体文件(旧式数字),但随后这些文件将使用旧式数字。为不同的设置生成不同的字体文件可以解决这个问题,但会很尴尬。也许有一个真正支持 OpenType 功能的字体文件生成器,但我还没有遇到过。

您可以使用托管在您自己的服务器上的 .ttf 文件。也就是说,下载您将使用的所有字体的 .ttf 文件,将它们上传到您的服务器,并在 @font-face 规则中引用它们。缺点是 Source Sans Pro 根本不会在缺少可下载字体的 support to .ttf 的浏览器上使用,最重要的是 IE 8 及更早版本(以及 Android 2.1)。也许更重要的是,渲染质量可能比使用其他字体格式(如 .wof)时更差。

演示,使用单一(常规)字体:

<!doctype html>
<style>
body { font-size: 18pt }
@font-face {
font-family: 'Source Sans Pro';
src: url('sourcesanspro-regular-webfont.ttf') format('truetype');
}
p {
font-family: 'Source Sans Pro', sans-serif;
}
.otf {
-moz-font-feature-settings: "ss01" 1, "onum" 1;
-webkit-font-feature-settings: "ss01" 1, "onum" 1;
font-feature-settings: "ss01" 1, "onum" 1;
}
</style>
<p>Hello world! Look at my l’s and numbers: 1234567890.</p>
<p class=otf>Hello world! Look at my l’s and numbers: 1234567890. (OTF enabled)</p>

关于html - CSS 高级 OTF 功能不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23452463/

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