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

Question

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

字体的子字符命名如下：“A.alt”、“A.alt1”、“B.alt”等，所以它们没有 unicode 去之后。

我发现 this 但在使用 Inspect Element 时 CSS-属性只是 returns 一个“未知属性名称”错误。还有其他方法吗？

<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

根据我的说法，最好的方法是利用 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 传递的值并使用 attr(data-name)

在您的 CSS 中使用相同的值

Answer 2

您可以使用 font-feature-settings to achieve that. Set it to "salt" 或 "salt" 2 或 "salt" 3（依此类推）代替 font-variant-alternates，具体取决于您要使用的替代方案。

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

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

Answer 3

你可以这样做而不需要额外的跨度：

@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';
}

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

Using font character substitutions in CSS or JS

html

javascript

css

fonts

glyph-substitution