Question

我正在尝试使用this font访问一些替代字符字形。

字体的字符subs命名如下：“A.alt”，“A.alt1”，“B.alt”等等，因此它们没有可用的unicode。

我找到this但是在使用Inspect Element时，CSS-property只返回一个“未知属性名称”-error。还有其他办法吗？

<html>
    <meta charset="ISO-8859-1">
    <title>Glyph-test</title>
    <style>
        h1 {
            font-family: Baron neue;

        }
        h1 span.A-alt {
            font-variant-alternates: character-variant(A.alt);
        }
    </style>


    <h1>Testing alternative <span class="A-alt">A</span></h1>
</html>

Answer 1

您可以使用font-feature-settings代替font-variant-alternates来实现这一目标。根据您要使用的替代方案，将其设置为"salt"或"salt" 2或"salt" 3（依此类推）。

您的CSS代码可能如下所示：

h1 span.A-alt {
    font-feature-settings: "salt" 2;
}

Answer 2

您可以这样做，而无需额外的跨度：

@font-face {
    font-family: 'MyFont';
    src: local('MyFont');
}

@font-face {
    font-family: 'MyFont-Alt';
    font-feature-settings: "salt"; 
    /* Above can vary depending on the font. For example:
        font-feature-settings: "aalt"; 
        font-feature-settings: "ss01";
    */
    src: local('MyFont');
    unicode-range: U+004d,U+004f ; /* Unicode values of the original characters. */
}

body{
    font-family: 'MyFont-Alt','MyFont';
}

Answer 3

根据我的最佳方式是使用HTML5的data-属性。

在你的情况下你可以这样实现它：

<html>
    <meta charset="ISO-8859-1">
    <title>Glyph-test</title>
    <style>
        h1 {
            font-family: Baron neue;

        }
        h1 span.A-alt {
            font-variant-alternates: character-variant(attr(data-variant));
        }
    </style>


    <h1>Testing alternative <span class="A-alt" data-variant="A.alt">A</span></h1>
</html>

您可以按照自己的意愿实施character-variant(attr(data-variant))，但是您明白了。您通过HTML＆amp;使用attr(data-name)

在CSS中使用相同的值

在CSS或JS中使用字体字符替换

3 个答案: