Лигатуры не отображаются на веб-сайте, но в Google Fonts все в порядке

Мой веб-сайт пытается отображать буквы «ل» и «ا», вместе они обычно становятся «لا».

Однако мой веб-сайт (статический сайт Hugo) не отображает лигатуру так, как я ожидал.

или как я сам видел из Google Fonts

Код CSS моего сайта находится здесь: https://github.com/adehad/dhikr-hub/blob/d58c4e38299983676217e382774cae137d4a980e/site/assets/_custom.scss#L21

URL сайта с примером здесь: https://adehad.github.io/dhikr-hub/qasidas/al-mashrab_al-ahna/#30

Я получил файлы woff, используя https://gwfh.mranftl.com/fonts/scheherazade-new?subsets=arabic,latin Но те же результаты были у меня при использовании шрифтов, предоставленных создателем шрифта (со страницы «О программе» по ссылке на шрифты Google).

Я пытался принудительно включить лигатуры, но результаты все равно те же.

font-feature-settings: "liga" 1;
font-variant-ligatures: normal;

Я пробовал браузеры на базе Firefox и Chromium, оба получили один и тот же результат. Это связано с проблемой конфигурации с моей стороны, тем более что шрифт также работает с предварительным просмотром шрифтов Google.

Есть ли вероятность того, что какой-то этап сборки в процессе Hugo влияет на шрифты? Они используют Dart SASS, но я не совсем понимаю, имеет ли это значение.

Есть ли какие-нибудь дополнительные советы о том, почему эта лигатура не применяется и какие еще варианты у меня могут быть?


Я изо всех сил пытаюсь создать воспроизводимый пример. Моя попытка ниже была сделана путем копирования HTML, сгенерированного Hugo, а затем воссоздания соответствующего CSS либо в виде встроенных стилей, либо в виде встроенного CSS в одном HTML, который корректно отображается на моей стороне.

Пример ниже теперь воспроизводится

<html lang = "en-us" dir = "ltr"
    style = "--arabic-font-perc: 253%; --transliteration-font-perc: 80%; --translation-font-perc: 85%;">

<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width,initial-scale=1">
    <meta property = "og:locale" content = "en_us">
    <meta property = "og:type" content = "article">

    <!-- Google Fonts Direct Import -->
    <!--
    <link rel = "preconnect" href = "https://fonts.googleapis.com">
    <link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin>
    <link href = "https://fonts.googleapis.com/css2?family=Scheherazade+New:wght@400;500;600;700&display=swap"
        rel = "stylesheet">
    -->

    <!-- Equivalent to Wesbite -->
    <style>
        :root {
            --arabic-font-family: 'Scheherazade New';
            --arabic-font-perc: 200%;
        }

        @font-face {
            font-family: 'Scheherazade New';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url(https://fonts.gstatic.com/s/scheherazadenew/v15/4UaZrFhTvxVnHDvUkUiHg8jprP4DOwFmO24p.woff2)format("woff2");
        }

        .arabic {
            font-family: var(--arabic-font-family), sans-serif;
            font-size: var(--arabic-font-perc);
            letter-spacing:.33px;
        }
    </style>

</head>


<body dir = "ltr">
    <main class = "container flex">
        <div style = "min-width:20rem; flex-grow:1; padding:1rem">
            <article
                style = "transition:.2s ease-in-out; transition-property:transform,margin,opacity,visibility; will-change:transform,margin,opacity">
                <table style = "text-align:center">
                    <tbody>
                        <tr class = "arabic">
                            <td>بِالْأَثَرِ</td>
                        </tr>
                    </tbody>
                </table>
            </article>
        </div>
    </main>
</body>

</html>


🤔 А знаете ли вы, что...
С CSS можно создавать красочные кнопки и элементы интерфейса.


84
1

Ответ:

Решено

После дальнейшего копания было обнаружено, что используемая тема Hugo изменила letter-spacing, в частности, она была установлена ​​как: letter-spacing:.33px;.

Конкретно на уровне body. Как и ожидалось, это повлияло на арабские лигатуры во вложенных элементах.

Поэтому решением было изменить CSS следующим образом:

.arabic {
    font-family: var(--arabic-font-family), sans-serif;
    font-size: var(--arabic-font-perc);
    letter-spacing: normal; // This is the solution !
}