Какой размер шрифта обычно используется для html и каждого элемента? - PullRequest
Новая
       38

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

0 голосов
/ 06 февраля 2020

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

Я не знаю, когда мне следует использовать rem, em и какой размер шрифта я должен определить root в индексе. html.

Ответы [ 3 ]

0 голосов
/ 06 февраля 2020

Я думаю, что вас смущает погода, которую вы используете px или em, или ren или pt, et c ...?

Используйте rem единицу, которая по умолчанию 16px (1rem = 16px), но вычислять значение будет утомительно, так как вы знаете размер шрифта браузера по умолчанию, установленный на html, который 16px и другие элементы в dom наследуют это значение, поэтому вы делаете это html {font-size: 62.5%}, делая это сейчас 1rem равен 10px 

html {
font-size: 62.5%;
}
body {
font-size: 1.6rem
}

Примечание. 16px - это размер шрифта по умолчанию, равный 100%. Если вы установите 62,5% в качестве размера шрифта для html, то теперь ваш размер шрифта по умолчанию будет 10px, что является небольшим, поэтому установите размер шрифта для тела 1.6rem (что равно 16px) , чтобы другие элемент наследует его, и изменений не будет.

Теперь вы можете легко использовать rem unit вместо px.

Примечание * Исправлены значения px , Означает, что если экран станет меньше, он останется таким же. Но единицы измерения - это относительные единицы.

Спасибо

0 голосов
/ 06 февраля 2020

Bootstrap имеет размер шрифта, с которым вам может быть легко работать. 

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  font-family: ___; /* <= choose your own font */
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}
h1 {
  font-size: 2.5rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.75rem;
}
h4 {
  font-size: 1.5rem;
}
h5 {
  font-size: 1.25rem;
}
h6 {
  font-size: 1rem;
}

Suc6 с вашим сайтом.

0 голосов
/ 06 февраля 2020

Типичным является следующее: 

<h1> - 32px - font-size: 2em 
<h2> - 24px - font-size: 1.5em 
<h3> - 18px - font-size: 1.17em 
<h4> - 16px - font-size: 1em 
<h5> - 13px - font-size: 0.83em 
<h6> - 10px - font-size: 0.67em
...