Лигатуры не отображаются на веб-сайте, но в 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 применяется, а также какие именно шрифты были загружены.
Действительно, я ценю комментарии. Я искал свойства CSS с «шрифтом» в названии, но оказалось, что оно связано с «буквой». В конце концов попал туда!
Ответы 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 !
}
Не могли бы вы извлечь ровно столько кода, чтобы показать проблему, и поместить ее в свой вопрос. Проблема с внешними сайтами заключается в том, что они могут исчезнуть в будущем или быть исправлены, что сделает ваш вопрос бесполезным для будущих читателей. См. stackoverflow.com/help/minimal-reproducible-example