html - 不稳定的字体特殊样式

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 功能的结果。默认情况下，不同的浏览器有不同的开/关效果。我的猜测是这种字体具有“上下文交替”功能，可将词尾“s”转换为不同的形式(长尾，在顶部示例中)。

如果确实是 OpenType 功能在起作用，您可以使用 CSS 控制行为 font-feature-settings .

更新 查看字体数据后，确实是这个问题:该字体在其 OpenType 布局表中定义了上下文替代('calt')功能。此功能在某些浏览器和操作系统中默认处于启用状态，从而导致出现长尾“s”显示。在其他情况下，它是关闭的，导致出现短的“s”。

您可以按照描述通过 CSS 打开/关闭此功能 here , 虽然support目前还不是很普遍。

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