Question

我使用css在html文件中实现了自定义字体，但字体在不同浏览器中的加载方式不同。我遇到的具体问题是字体的行为是一个单词的最后一个字母获得特殊效果。在这里，我将向您展示Opera / Firefox比较：

我可以在两种浏览器中使用特殊效果吗？

编辑：

我基本上遵循这个啧啧，因为我不知道如何使用自定义字体：https://www.youtube.com/watch?v=AYNL_VY5m0Y

CSS:

@font-face{
    font-family: 'custom';
    src: url('Hipster Script Pro.otf');
}


.classname {

    font-family: 'custom';
    font-size: 30px;
    LINE-HEIGHT:20px;
    margin-top: 25px;
    margin-bottom: 15px;
    color: #303030;
    text-align: center;
}

Answer 1

没有看到代码或字体数据，很难肯定，但假设完全相同的字体数据但不同的浏览器：你看到的很可能是OpenType功能的结果。不同的浏览器默认具有不同的开/关效果。我的猜测是这个字体有一个'contextual alternates'功能，它将单词final的's'转换成另一种形式（长尾，在上面的例子中）。

如果确实有OpenType功能在运行，您可以使用CSS font-feature-settings来控制行为。

<强>更新在查看字体数据之后，确实存在这个问题：字体在其OpenType布局表中定义了Contextual Alternates（'calt'）特征。默认情况下，此功能在某些浏览器和操作系统中处于启用状态，从而导致长尾显示。在其他情况下它是关闭的，导致短''。

您可以按照here所述通过CSS操作此功能，但support尚未普及。

作为一个有点相关的观点：我建议删除字体文件的链接;它是商业/非FLOSS字体，您可能无法以这种方式自由重新分发。您可能还需要仔细检查您的字体许可是否允许您将其用作webfont（@ font-face）。

不稳定的字体特殊造型

1 个答案: