Используйте разные шрифты для латинских и японских символов с CSS - PullRequest
Новая
       14

Используйте разные шрифты для латинских и японских символов с CSS

7 голосов
/ 18 августа 2010

Мы создаем сайт на японском и английском языках.Мы хотим уйти от стандартных японских шрифтов, которые не могут использовать ClearType.Есть ли способ сказать браузеру использовать другой японский шрифт JUST для японских символов (например, Meiryo) и другой шрифт только для латинских символов (например, Helvetica) на той же странице?Мы не хотим, чтобы в английских словах использовался шрифт Meiryo.

Мы фактически использовали подсказку, чтобы сначала указать английские шрифты в CSS из этой статьи: http://www.lukew.com/ff/entry.asp?118

Однако этоне работает в IE.Даже если мы сначала укажем Helvetica, Verdana или любой другой широко доступный шрифт, а затем японский шрифт в CSS, IE все равно будет использовать японский шрифт для английских слов.Firefox, Chrome и т. Д. Работают должным образом.

(Если возможно, мы надеемся не прибегать к чему-то вроде переноса каждого английского слова в промежуток)

Ответы [ 4 ]

5 голосов
/ 18 сентября 2010

Вы не можете обойти пометку каждого языкового раздела классом и шрифтом, если хотите, чтобы это работало в кросс-браузерной среде.Это невозможно сделать только с помощью CSS.

Вы можете применить языковой класс вручную или автоматически.Вручную может быть много работы, чтобы поддержать и поддержать, но это надежно.Динамически это можно сделать с помощью внутреннего сценария или Javascript, отсканировав строку на наличие символов, попадающих в определенные блоки символов Юникода, и применив соответствующий класс языка.

Вы можете найти определения блоков здесь (по-японски это Хирагана и Катакана): http://www.fileformat.info/info/unicode/block/index.htm

Я бы порекомендовал внутренний способ сделать это, потому что изменение шрифтана странице может вызвать мерцание или смещение элементов во время загрузки страницы.

4 голосов
/ 24 сентября 2010

Создание класса CSS для английского и японского текста. 

.ja { font-family: meiryo, sans-serif; }
.en { font-family: arial, verdana, sans-serif; }

Если вся страница написана на японском языке, добавьте class = "ja" в тег body, если есть смешанный контент, добавьте class = "ja" в элемент html, содержащий японский текст, например: 

<td class="ja">日本語</td>
2 голосов
/ 13 июля 2017

Я решил свою проблему, используя CSS-свойство 'unicode-range'.

Подробности можно найти здесь: https://developer.mozilla.org/en/docs/Web/CSS/@font-face/unicode-range

Пример: 

/* bengali */
@font-face {
  font-family: 'Atma';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/atma/v2/tUcVDHNCVY7oFp6g2zLOiQ.woff2) format('woff2');
  unicode-range: u+0980-09FF;
}


body {
  font-family: 'Atma', arial, sans-serif;
  font-size: 18px;
}
<p>Example is better than precept.</p>
<p>উপদেশের চেয়ে দৃষ্টান্ত ভালো।</p>
0 голосов
/ 16 сентября 2010

Как вы говорите странице на каком языке печатать на экране?

Если вы получаете переменную, вы не можете использовать эту переменную как класс, который вы используете для div тела. 

<body class="english">

или 

<body class="japanese">
...