5

我目前正在尝试使用此字体访问一些替代字符字形。

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

我发现了这一点，但是当使用 Inspect Element 时，CSS-property 只返回“未知属性名称”-错误。还有其他方法可以做到这一点吗？

<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>
4

3 回答 3

2

而不是font-variant-alternates你可以使用font-feature-settings来实现这一点。根据您要使用的替代方法将其设置为"salt"或"salt" 2或"salt" 3（等等）。

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

h1 span.A-alt {
    font-feature-settings: "salt" 2;
}
于 2016-10-07T09:09:35.913 回答
0

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

@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';
}
于 2019-07-15T17:24:19.600 回答
-2

在我看来，最好的方法是利用data-HTML5 的属性。

在您的情况下，您可以像这样实现它：

<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 传递的值并在您的 CSS 中使用相同的值attr(data-name)

于 2016-10-07T08:46:46.357 回答