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

Question

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

javascripthtmlcssfontsglyph-substitution

6

我正在尝试使用这种字体访问一些替代字符字形。

该字体的字符替换名称如下："A.alt"、"A.alt1"、"B.alt"等，因此它们没有可用的Unicode。

我发现了这个，但是在使用检查元素时，CSS属性返回一个“未知属性名”错误。还有其他方法吗？

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

- Carl Papworth

你用Firefox或Safari测试过吗？看起来它们目前是唯一支持font-variant-alternates的浏览器：http://caniuse.com/#feat=font-variant-alternates - ausi

我尝试了Firefox和Chrome。 - Carl Papworth

3个回答

0

您可以这样做，无需额外的 spans：

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

- Daveman

-2

在我看来，最好的方法是利用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 中使用相同的值。

- Nikhil Nanjappa

那真的很棒，当属性实际起作用时，但它似乎并没有起作用。我现在的主要问题就是访问替代字形。 - Carl Papworth

这是你的caniuse链接中的内容：“CSS Values and Units Level 3增加了使用attr()在任何CSS属性上的能力，而不仅仅是content，并且可以将其用于非字符串值（例如数字、颜色）。” 在你投票反对之前，你能认真阅读自己的建议吗？？我暂时标记了你的评论。 - Nikhil Nanjappa

@NikhilNanjappa 你说得对，这就是caniuse所说的。但是如果你仔细看，你会发现没有一个浏览器支持这个功能。这就是我想指出的问题，抱歉造成了歧义。 - ausi

对于阅读此讨论的人（因为我的原始评论已被删除），这是我们正在谈论的链接：http://caniuse.com/#feat=css3-attr - ausi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ausi · Accepted Answer

代替使用font-variant-alternates，您可以使用font-feature-settings来实现。将其设置为"salt"或"salt" 2或"salt" 3（以此类推），具体取决于您想要使用哪个替代方案。

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

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