Блог

Главная - Вопросы по программированию - Как браузеры генерируют жирные шрифты, если указан только обычный?

Как браузеры генерируют жирные шрифты, если указан только обычный?

#css #google-chrome #firefox #fonts #webfonts

#css — код #google-chrome #firefox #шрифты #веб — сайты

Вопрос:

Я использую шрифт Baloo 2 на каком-то веб-сайте. Я загрузил только «обычный» (т.Е. 400) весовой вариант шрифта, но как в Chrome, так и в Firefox он выглядит немного иначе, когда font-weight: bold используется (или 700).

Возможно, версия шрифта «bold» в Chrome выглядит лучше, но интересно, что значение «Chrome bold» находится где-то между 500 и 600, в то время как «Firefox bold» лишь немного больше, чем 400.

Мне любопытно, откуда взялись эти «смелые» варианты и как я мог бы получить согласованный обзор в разных браузерах.

Пожалуйста, проверьте следующий пример:

 @font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400;
  src: url(https://gstatic.loli.net/s/baloo2/v1/wXKrE3kTposypRyd51jcAA.woff2) format('woff2');
  unicode-range: U 0000-00FF, U 0131, U 0152-0153, U 02BB-02BC, U 02C6, U 02DA, U 02DC, U 2000-206F, U 2074, U 20AC, U 2122, U 2191, U 2193, U 2212, U 2215, U FEFF, U FFFD;
}

b {
  /* Not important, just to be absolutely sure */
  font-weight: bold !important;
}

.example {
  font-family: 'Baloo 2';
  font-style: normal;
} 
 <div class="example">
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p><b>The quick brown fox jumps over the lazy dog.</b></p>
</div>

Комментарии:

1. Я не совсем понимаю, в чем заключается ваш вопрос. Элемент b сообщает ему, что он выделен жирным шрифтом. В инструментах отладки chrome говорит, что элемент b имеет вес 700.

2. @LarryBud Через не указан жирный шрифт @font-face , но текст выглядит жирным шрифтом. Это загадка, что «жирный вариант шрифта» появляется из ниоткуда.

3. Это не из ниоткуда, у вас есть второе предложение, заключенное в элемент <b> . Браузеру не нужен определенный жирный шрифт, чтобы выделить что-то жирным шрифтом.

4. @LarryBud Чтобы текст действительно выглядел жирным, в дополнение к указанию требуется «жирный вариант» шрифта font-weight . Вопрос не в font-weight элементе, а в отображаемом начертании шрифта (наборе символов). Можете ли вы подтвердить свое утверждение, что браузеру не нужен определенный жирный шрифт ?

5. Тонны статей на тему «искусственного жирного шрифта»: google.com /…

Ответ №1:

Смотрите Эту статью, но в основном вам нужно 2 вещи. Установите для тегов h значение all использовать определенный вес шрифта, уменьшите вес шрифта до -100 от этого.

Вы можете использовать класс, чтобы сделать его жирным, если хотите

 @font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400;
  src: url(https://gstatic.loli.net/s/baloo2/v1/wXKrE3kTposypRyd51jcAA.woff2) format('woff2');
  unicode-range: U 0000-00FF, U 0131, U 0152-0153, U 02BB-02BC, U 02C6, U 02DA, U 02DC, U 2000-206F, U 2074, U 20AC, U 2122, U 2191, U 2193, U 2212, U 2215, U FEFF, U FFFD;
}

b { // insure adding bold won't jack you up!
  font-family: 'Baloo 2';
  font-weight: 200 !important;
}

.bold {
  font-family: 'Baloo 2';
  font-weight: 700 !important;
}

h1, h2, h3, h4, h5 {
   font-family: 'Baloo 2';
   font-weight: 400; /* Be specific */
}

.example {
  font-family: 'Baloo 2';
  font-style: normal;
} 
 <div class="example">
  <p>The quick brown fox jumps over the lazy dog.  <- P tag</p>
  <p><b>The quick brown fox jumps over the lazy dog.<- Bold</b></p>
  <h4>The quick brown fox jumps over the lazy dog. <- H4</h4>
  <h4><b>The quick brown fox jumps over the lazy dog. <- H4 Bold</b></h4>
</div>
 <p class="bold">The quick brown fox jumps over the lazy dog.  <- Class bold</p>