Мой веб-сайт пытается отображать буквы «ل» и «ا», вместе они обычно становятся «لا».
Однако мой веб-сайт (статический сайт 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 можно создавать красочные кнопки и элементы интерфейса.
После дальнейшего копания было обнаружено, что используемая тема 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 !
}