Использование замены символов шрифта в CSS или JS

Я пытаюсь получить доступ к некоторым альтернативным символическим символам, используя этот шрифт в данный момент.

Субъекты символов шрифта названы так: "A.alt", "A.alt1", "B.alt" и т. Д., Поэтому у них нет юникода, к которому нужно обращаться.

Я нашел это, но при использовании Inspect Element CSS-свойство просто возвращает ошибку "Unknown Property Name". Есть ли другой способ сделать это?

<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>
Источник

2 ответа

Решение

Вместо font-variant-alternates ты можешь использовать font-feature-settingsчтобы достичь этого. Установите это "salt" или же "salt" 2 или же "salt" 3 (и так далее) в зависимости от того, какую альтернативу вы хотите использовать.

Ваш код CSS может выглядеть так:

h1 span.A-alt {
    font-feature-settings: "salt" 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';
}
Источник

На мой взгляд, лучший способ - использовать 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)

Источник
Другие вопросы по тегам