Можно ли использовать 2 разных шрифта для одного и того же элемента, 1 для английского sh и другой для тамильского (юникод) - PullRequest
Новая
       78

Можно ли использовать 2 разных шрифта для одного и того же элемента, 1 для английского sh и другой для тамильского (юникод)

0 голосов
/ 16 марта 2020

Я хочу использовать «Arial Unicode MS» для тамильского текста, и я хочу использовать «Open Sans» для Engli sh. Но оба находятся в одной строке, а не в отдельном элементе.

ORGANI C Масло марачекку Gingelly 500 мл (மரச்செக்கு நல்லெண்ணெய்)

Сейчас в этой строке английский язык sh должен быть "открытым без", а тамильский (иностранный) язык должен быть "Arial Unicode MS"

Как мне добиться этого в CSS? Нужно ли использовать JS? так как?

1 Ответ

1 голос
/ 16 марта 2020

Конечно можно.

Как вы думаете, that emoji ? действительно является частью семейств шрифтов Consolas или Menlo, которые используются для визуализации этого element's text? It's not.</p> <p>What happens here is that the browser will go all the road through the defined font-families, until it finds one which declared it is able to handle that glyph. If it can't, then it will search all the list of OS defined fonts. </p> <p>So in the StackOverflow case of the <code> element we have </p> <pre><code>Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif

В моей системе (macO) ни один из них не может представлять глиф "?", поэтому он возвращается к системному шрифту (Apple Color Emoji). Что означает деталь element indeed has two different fonts being used for its only textNode: Menlo for <code>that emoji и системный шрифт для «?».

В вашем случае, поскольку шрифт «Open Sans» поддерживает только стандартные ISO Latin 1, Latin CE, греческий и Наборы кириллицы c, вы можете просто сделать 

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
body {
  font-family: "Open Sans", "Arial Unicode MS", sans-serif;
}
<span>ORGANIC Marachekku Gingelly Oil 500 ml (மரச்செக்கு நல்லெண்ணெய்)</span>

и тамильская часть с радостью откатится к Arial Unicode MS , где это возможно. ( Кстати, вы можете объявить другой резервный шрифт для систем, в которых он не установлен ).

Теперь также могут быть случаи, когда кто-то захочет использовать шрифт, который поддерживает множество наборов символов, но только для нескольких глифов.
Для таких случаев вы можете использовать свойство unicode-range декларации @font-face. 

@font-face {
  font-family: 'sans-serif-vowels';
  src: local('Arial'), local("Helvetica Neue"), local("Helvetica");
  unicode-range: U+61, U+65, U+69, U+6f, U+75, U+41, U+45, U+49, U+4f, U+55;
}

body{
  font-family: sans-serif-vowels, cursive;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan ante a consectetur volutpat. Donec venenatis tristique gravida. Morbi ultricies congue justo, sed condimentum neque elementum sit amet. Duis in nisl ultricies turpis gravida vestibulum. Aliquam commodo velit in neque convallis posuere quis hendrerit libero. Nullam tempor, mauris at posuere convallis, leo ante pharetra erat, eget accumsan quam sem eu erat.
...