Уменьшение размера шрифта с помощью директивы lang css дает странные результаты

Question

Я создаю многоязычный сайт, и я понял, что некоторые языки, такие как французский, довольно многословны, что нарушает мой дизайн, который был сделан с использованием английского текста.Поэтому я пытался использовать директиву :lang css главным образом для уменьшения размера шрифта по всем направлениям для французской целевой страницы.Но результаты довольно противоречивы.Уменьшение процента на небольшое количество приводит к большому уменьшению фактического размера.

Возможно, мое понимание неверно.Вот пример кода, который объясняет это явление

:lang(fr)
{
  font-size:90%;
}
h1 {
  font-size:3em;
}

<h1>
This is my heading
</h1>
<h1 lang="fr">
This is my very very long verbose heading in French
</h1>

Как видите, мой французский заголовок стал очень маленьким с уменьшением размера шрифта всего на 10%.

Answer 1

'Возможно, мое понимание неверно. "Да, я так думаю. Вы ожидаете, что размер шрифта для французского языка покажет 90% от 3em, который вы определили для h1 { font-size:3em;}.

Но будьте внимательны, когда устанавливаете что-тонапример, font-size:90% означает, что размер шрифта будет наследовать 90% от непосредственного родителя, где мы уже установили размер шрифта. Исходя из заданного вами кода, вы не устанавливаете размер шрифта для контейнера <h1 lang="fr"> (в данном случае это 'body').

Если мы не установим размер шрифта для основного браузера, то по умолчанию установите 16px (в chrome, но он может варьироваться от браузера к браузеру). Таким образом, селектор псевдокласс :lang(fr) имеет более высокий приоритет, чем только селектор тегов h1и он наследует от своего тега body body означает «14.4px».

Мое предложение состоит в том, чтобы преодолеть эту ситуацию, примените юнит em. em юнит наследует от самого верхнего родительского элемента.может быть может дать вам путь.

body {
  font-size: 16px;
}
h1 { 
  font-size:3em; /* means 16*3 = 48px; */
}
h1:lang(fr) {
  font-size:2.7em; /* (48*90)/100 = 43.2px/16px = 2.7em */
}

<h1>Actual Font Size</h1>
<h1 lang="fr">French Font Size</h1>