Есть ли способ включить два разных шрифта в заголовок (например, <h1>, <h2>и т. Д.)?

Поэтому в своем блоге я часто использую в заголовках как английские, так и ивритские, арабские и греческие слова. Я хотел бы, чтобы английские слова были конкретным шрифтом (например, Calibri), а ивритские слова - конкретным шрифтом (например, SBL иврит), а арабские слова - конкретным шрифтом (например, традиционный арабский)...и так далее.

Есть ли способ сделать это?

В настоящее время это мой HTML-код для заголовка h1:

h1.entry-title,
h1.archive-title {
    color: #333;
    font-family: Hebrew, "SBL Hebrew", "Times New Roman", serif;
    font-size: 2.2em;
    font-size: 28px;
    font-weight: 200;
    line-height: 1.25em;
    margin: 1em 0 0.4em 0;
    text-align: center;
}
Источник

1 ответ

Решение

Font-Family откат

Самый простой способ - это создать запасной вариант семейства шрифтов. Это будет работать только с языковыми шрифтами (SBL Hebrew не может отображать арабский или английский, Rraditional Arabic не может отображать английский и т. Д.)

font-family: "SBL Hebrew", "Traditional Arabic", Calibri;

И рабочий пример: http://jsfiddle.net/cWzwT/

атрибут lang

Вы также можете попробовать следующий метод, показанный в этом посте - Язык Интернационализации CSS:

:lang(he) { font-family: "SBL Hebrew" }
:lang(ar) { font-family: "Traditional Arabic" }

Использование показанного здесь метода : lang совместимо с большинством современных браузеров, поэтому оно должно сработать. Вероятно, требуется добавить lang приписать элементу, поэтому я не знаю, подходит ли это именно к вашей проблеме.

Юникод-диапазон

Другим более общим способом является использование диапазона Юникод. Например

@font-face {
    font-family: "SBL Hebrew";
    unicode-range: U+05-90, U+05-FF;
}

Для дальнейшего чтения:

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