Есть ли способ включить два разных шрифта в заголовок (например, ‹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;
}

person Community    schedule 17.08.2013    source источник
comment
Я должен добавить, что я использую программное обеспечение WordPress на своем личном веб-сайте.   -  person    schedule 17.08.2013


Ответы (1)


Резервный вариант семейства шрифтов

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

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

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


атрибут языка

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

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

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


диапазон unicode

Другой более общий способ — использовать unicode-range. Например

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

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

person Itay    schedule 17.08.2013
comment
Звучит неплохо. Будет делать больше исследований по этому поводу. Я ценю ссылку. - person ; 17.08.2013
comment
@ H3br3wHamm3r81: Обратите внимание, что в моем сообщении есть две ссылки. Я думаю, что для этого требуется присвоить элементу атрибут lang. - person Itay; 17.08.2013
comment
Да сэр. Я читаю. Это должно сработать. По крайней мере, вы дали мне направление, куда идти. Спасибо еще раз. - person ; 17.08.2013