Увеличить текст на китайском на 20%

Question

Увеличить текст на китайском на 20%

0

Я пишу HTML-документ с сочетанием английского и китайского текста. Китайский не мой первый язык, поэтому я предпочитаю, чтобы китайский текст был немного больше обычного, чтобы я мог ясно видеть штрихи. Я пытаюсь создать документ для достижения этого.

Очевидное решение CSS:

:lang(zh-Hans) {font-size: 1.2em;}

имеет менее очевидную проблему. На каждом вложенном элементе (любого вида) размер шрифта умножается на еще 20%. В следующем примере каждое китайское предложение больше предыдущего.

<html>
  <head>
    <style type="text/css">
      :lang(zh-Hans) {font-size: 1.2em;} 
    </style>
  </head>
  <body>
    <div lang="zh-Hans">
      我不懂。
      <span>我不懂。</span>
      <span><span>我不懂。</span></span>
    </div>
  </body>
</html>

Я могу переключиться на абсолютный размер:

:lang(zh-Hans) {font-size: 20px;}

но это делает все китайские тексты одинакового размера, так что, например, заголовки больше не больше основного текста.

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

Можно ли применить относительный размер шрифта к тексту с тегами, не добавляя добавление к вложенным элементам?

arx 21 март 2014, в 17:31

Источник

1

Имеет ли font-size:1.2rem (обратите внимание на «r»)? Больше о root em здесь .
bishop 21 март 2014, в 16:17
0

@bishop Спасибо, это как раз то, что мне было нужно. Если вы отправите ответ с этой ссылкой на спецификацию, я приму его.
arx 21 март 2014, в 16:24
0

Рад, что это сработало, ответ опубликован. И спасибо за подсказку селектора: lang () - не знал об этом. Здорово.
bishop 21 март 2014, в 17:01
0

ммм ... это "китаец" или "кандзи" ...? Просто говорю.
Phlume 21 март 2014, в 17:03

Показать ещё 2 комментария

Теги:

html

css

1 ответ

Ещё вопросы

Имеет ли font-size:1.2rem (обратите внимание на «r»)? Больше о root em здесь .
@bishop Спасибо, это как раз то, что мне было нужно. Если вы отправите ответ с этой ссылкой на спецификацию, я приму его.
Рад, что это сработало, ответ опубликован. И спасибо за подсказку селектора: lang () - не знал об этом. Здорово.
ммм ... это "китаец" или "кандзи" ...? Просто говорю.

bishop · Accepted Answer · 2014-03-21T14-44-00.000Z

Каскадирование em - довольно раздражающая проблема, которая, к счастью, имеет простое современное решение: root em (rem).

CSS Tricks имеет это сказать:

Одна из проблем с использованием "em" в качестве размеров шрифта заключается в том, что они каскадируются, поэтому вы навсегда пишете правила, которые выбирают вложенные элементы, чтобы вернуть их обратно в 1em; В CSS3 теперь есть rem ("root em"), чтобы предотвратить эту проблему. Просто объявляйте px backback, и вы можете использовать его сегодня.

Для деталей gory ознакомьтесь с спецификацией CSS3.