font-size | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | medium |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Определяет размер шрифта элемента. Размер может быть установлен несколькими
способами. Набор констант (xx-small, x-small, small,
medium, large, x-large, xx-large) задает размер, который называется абсолютным.
По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера
и операционной системы.
Другой набор констант (larger, smaller) устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.
В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента.
Сам размер шрифта определяется как высота от базовой линии до верхней границы кегельной площадки, как показано на рис. 1.
Рис. 1. Размер шрифта
Синтаксис
font-size: абсолютный размер | относительный размер | значение | проценты | inherit
Значения
Для задания абсолютного размера используются следующие значения: xx-small, x-small, small, medium, large, x-large, xx-large. Их соответствие с размером шрифта в HTML приведено в табл. 1.
| CSS | xx-small | x-small | small | medium | large | x-large | xx-large | |
|---|---|---|---|---|---|---|---|---|
| HTML | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
Относительный размер шрифта задается значениями larger и smaller.
Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др. За 100% берется размер шрифта родительского элемента. Отрицательные значения не допускаются.
- inherit
- Наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font-size</title>
<style>
h2 {
font-family: 'Times New Roman', Times, serif; /* Гарнитура текста */
font-size: 250%; /* Размер шрифта в процентах */
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt; /* Размер шрифта в пунктах */
}
</style>
</head>
<body>
<h2>Duis te feugifacilisi</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 2. Применение свойства font-size
Объектная модель
[window.]document.getElementById(«elementID»).style.fontSize
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
Шрифт
CSS по теме
- font-size
Статьи по теме
- Добавление CSS
- Единицы измерения
- Свойства текста
Рецепты CSS
Как отключить масштабирование на мобильной веб-странице с помощью HTML и CSS?
Функция масштабирования не всегда полезна. Одно из неудобств, с которым сталкиваются и разработчики, и пользователи, относится к масштабированию веб-страниц на мобильных устройствах. Мы поможем решить эту проблему. Можно использовать браузер Surefox для отключения этой функции, но все же страница будет масштабироваться при двойном нажатии на экран.
Поэтому попробуйте следующие методы, используя HTML и CSS.
Самый легкий способ отключения этой функции — это использование HTML тега <meta>. Атрибут user-scalable позволяет увеличить или уменьшить масштаб на мобильном устройстве. Чтобы отключить функцию масштабирования, необходимо задать значение “no” для этого атрибута.
Это будет выглядеть следующим образом:
<meta name="viewport" content="width=device-width, user-scalable=no">
А теперь попробуем пример:
Пример
<!DOCTYPE html>
<html>
<head>
<title>
Отключение масштабирования
</title>
<meta meta name="viewport" content="width=device-width, user-scalable=no" />
<style>
body {
width:500px;
border: 3px solid #4a91d8;
}
h2{
color: #4a91d8;
text-align:center;
text-shadow: 1px 3px 2px #000;
}
p {
font-size:18px;
padding:5px 0;
margin:10px;
width:220px;
height:320px;
border:2px solid #4a91d8;
}
div::after {
content: "";
clear: both;
display: table;
}
p:first-child{
float:left;
}
p:last-child{
float:right;
}
</style>
</head>
<body>
<h2>
Lorem Ipsum
</h2>
<div>
<p>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.
</p>
<p>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.
</p>
</div>
</body>
</html>
Попробуйте сами!
Давайте рассмотрим другой пример:
Пример
<!DOCTYPE html> <html> <head> <title> Отключение масштабирования </title> <meta meta name="viewport" content="width=device-width, user-scalable=no" /> <style> body { width:630px; border: 3px solid #4a91d8; height:auto; } h2{ color: #4a91d8; text-align:center; text-shadow: 1px 3px 2px #000; } img{ border:2px solid black; margin:5px; } div::after { content: ""; clear: both; display: table; } . left{ float:left; } .right{ float:right; } </style> </head> <body> <div> <h2> Houses </h2> <img src="https://cdn.vox-cdn.com/thumbor/RVclEmJ7_fDjExXPmUtHZ2nOeCU=/0x0:3000x2000/1200x800/filters:focal(1260x760:1740x1240)/cdn.vox-cdn.com/uploads/chorus_image/image/60890575/LizKuball_180512_0066_HighRes_Bungalow_Heaven.0.jpg" alt="House 1" /> <img src="https://www.boutiquehomes.com.au/sites/default/files/400_Montauk%2047%20and%2049%20-%20Greyson%20facade.jpg" alt="House 2" /> <img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/8B96/production/_105243753_house.jpg" alt="House 3"/> <img src= "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVAFvLYZXJ3xBEFRTnXe60ANdxJVCCisVXdkFzWKwJbCEjKMwxYw" alt="House 1"/> <p> <strong>Note:</strong> Не масштабируется на мобильных устройствах </p> </div> </body> </html>
Попробуйте сами!
Не используйте адаптивный метатег, если ваша веб-страница не разработана таким образом, чтобы была адаптивна и хорошо работала в таком масштабе.
Если используйте HTML тег <input>, IOS будет масштабировать страницу, если CSS свойство font-size установлено в значение меньше 16 px:
input[type='text'],
input[type='number'],
input {
font-size: 16px;
}Давайте попробуем пример:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
input { font-size: 16 px; }
input:focus{font-size:16px;}
</style>
</head>
<body>
<form action="getform.php" method="get">
Your Name: <input type="text" name="first_name" />
Your Surname: <input type="text" name="last_name" />
Enter Your E-Mail: <input type="email" name="user_email" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Попробуйте сами!
Если используете WP, вам может понадобиться добавить !important после 16px для переопределения оформления по умолчанию.
Можете попробовать следующее:
@media screen and (-webkit-min-device-pixel-ratio:0) {
select,
textarea,
input {
font-size: 16px;
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
select:focus,
textarea:focus,
input:focus {
font-size: 16px;
}
}Давайте посмотрим пример:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
input { font-size: 16 px; }
input:focus{font-size:16px;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
select,
textarea,
input {
font-size: 16px;
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
select:focus,
textarea:focus,
input:focus {
font-size: 16px;
}
}
</style>
</head>
<body>
<form action="getform. php" method="get">
Your Name: <input type="text" name="first_name" />
Your Surname: <input type="text" name="last_name" />
Enter Your E-Mail: <input type="email" name="user_email" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Попробуйте сами!
Изменение размеров элементов в CSS — Изучите веб-разработку
- Предыдущий
- Обзор: строительные блоки
- Следующий
В предыдущих уроках вы встречались с несколькими способами изменения размера элементов на веб-странице с помощью CSS. Важно понимать, насколько большими будут различные функции в вашем дизайне. Итак, в этом уроке мы обобщим различные способы получения элементов размера с помощью CSS и определим несколько терминов, касающихся размеров, которые помогут вам в будущем.
| Предпосылки: | Базовая компьютерная грамотность,
установлено базовое программное обеспечение, базовые знания
работа с файлами, основы HTML (изучение
Введение в HTML) и представление о том, как работает CSS (изучите
Первые шаги CSS. ) |
|---|---|
| Цель: | Чтобы понять, как мы можем изменять размеры объектов в CSS. |
HTML-элементы имеют естественный размер, установленный до того, как на них повлияет какой-либо CSS. Простой пример — изображение. Файл изображения содержит информацию о размерах, описанную как его внутренний размер . Этот размер определяется самим изображением , а не каким-либо форматированием, которое мы применяем.
Если вы поместите изображение на страницу и не измените его высоту или ширину, либо с помощью атрибутов тега , либо с помощью CSS, оно будет отображаться с использованием этого внутреннего размера. В примере мы поместили изображение под рамкой, чтобы вы могли видеть степень его размера, как определено в его файле.
Пустой
, с другой стороны, не имеет собственного размера. Если вы добавите в свой HTML без содержимого, а затем зададите ему границу, как мы сделали с изображением, вы увидите линию на странице.
Это свернутая граница элемента — нет содержимого, которое удерживало бы ее открытой. В нашем примере ниже эта граница растягивается до ширины контейнера, потому что это элемент уровня блока, поведение, которое должно стать для вас знакомым. У него нет высоты (или размера в измерении блока), потому что нет содержимого. В приведенном выше примере попробуйте добавить текст внутрь пустого элемента. Граница теперь содержит этот текст, потому что высота элемента определяется содержимым. Поэтому размер этого
в измерении блока зависит от размера содержимого. Опять же, это внутренний размер элемента — его размер определяется его содержимым. Конечно, мы можем придать элементам нашего дизайна определенный размер. Когда элементу присваивается размер (содержимое которого затем должно соответствовать этому размеру), мы называем его внешний размер . Возьмите наш
из приведенного выше примера — мы можем задать ему определенные значения width и height , и теперь он будет иметь этот размер независимо от того, какой контент в него помещен.
Как мы выяснили в предыдущем уроке о переполнении, заданная высота может привести к переполнению содержимого, если содержимого больше, чем помещается внутри элемента.Из-за этой проблемы переполнения, фиксация высоты элементов с помощью длины или процентов — это то, что нам нужно делать очень осторожно в Интернете.
Использование процентов
Во многих отношениях проценты действуют как единицы длины, и, как мы обсуждали в уроке о значениях и единицах, их часто можно использовать взаимозаменяемо с длинами. При использовании процента вам нужно знать, что это за процент от . В случае блока внутри другого контейнера, если вы зададите дочернему блоку ширину в процентах, это будет процент от ширины родительского контейнера.
Это связано с тем, что проценты разрешаются в зависимости от размера содержащего блока. Без применения процентного соотношения наши
займет 100% доступного пространства, так как это элемент блочного уровня. Если мы зададим ему ширину в процентах, это станет процентом от пространства, которое он обычно заполняет.
Поля и отступы в процентах
Если вы установите полей и отступов в процентах, вы можете заметить некоторое странное поведение. В приведенном ниже примере у нас есть коробка. Мы задали внутреннему блоку поле в размере 10 % и отступ в размере 10 %. Отступы и поля сверху и снизу поля имеют тот же размер, что и отступы и поля слева и справа.
Например, вы можете ожидать, что верхнее и нижнее поля в процентах будут выражаться в процентах от высоты элемента, а процентные значения левого и правого полей будут в процентах от ширины элемента. Однако, это не так!
Когда вы используете поля и отступы, установленные в процентах, значение рассчитывается из встроенного размера содержащего блока — следовательно, ширина при работе на горизонтальном языке. В нашем примере все поля и отступы составляют 10% от ширины. Это означает, что вы можете иметь одинаковые поля и отступы по всему блоку. Это факт, который стоит помнить, если вы используете проценты таким образом.
В дополнение к заданию фиксированного размера, мы можем попросить CSS указать элементу минимальный или максимальный размер. Если у вас есть ящик, который может содержать переменное количество контента, и вы всегда хотите, чтобы он был по крайней мере определенной высоты, вы можете установить для него свойство min-height . Коробка всегда будет иметь по крайней мере эту высоту, но затем станет выше, если содержимого больше, чем в коробке есть место при минимальной высоте.
В приведенном ниже примере вы можете увидеть два поля, оба с определенным мин-высота 150 пикселей. Коробка слева имеет высоту 150 пикселей; поле справа содержит контент, которому нужно больше места, поэтому его высота превышает 150 пикселей.
Это очень полезно для работы с переменным количеством контента, избегая при этом переполнения.
Обычно параметр max-width используется для уменьшения масштаба изображений, если не хватает места для их отображения с внутренней шириной, при этом следите за тем, чтобы они не превышали эту ширину.
В качестве примера, если бы вы установили ширину : 100% для изображения, а его собственная ширина была бы меньше, чем его контейнер, изображение было бы вынуждено растянуться и стать больше, в результате чего оно выглядело бы пиксельным.
Если вместо этого вы используете max-width: 100% , а его внутренняя ширина меньше, чем его контейнер, изображение не будет вынуждено растягиваться и увеличиваться, что предотвратит пикселизацию.
В приведенном ниже примере мы использовали одно и то же изображение три раза. Первому изображению присвоено ширина: 100% и находится в контейнере, который больше его, поэтому растягивается до ширины контейнера. Второе изображение имеет максимальную ширину : на нем установлено 100% , и поэтому оно не растягивается, чтобы заполнить контейнер. Третий блок снова содержит то же изображение, также с максимальной шириной : 100% ; в этом случае вы можете увидеть, как он уменьшился, чтобы поместиться в поле.
Этот метод используется, чтобы сделать изображения отзывчивыми , чтобы при просмотре на меньшем устройстве они соответствующим образом уменьшались. Однако не следует использовать эту технику для загрузки очень больших изображений и последующего их уменьшения в браузере. Изображения должны быть соответствующего размера, чтобы они были не больше, чем они должны быть для самого большого размера, который они отображают в дизайне. Загрузка слишком больших изображений приведет к замедлению работы вашего сайта и может стоить пользователям дополнительных денег, если они используют лимитное соединение.
Примечание: Узнайте больше о методах адаптивного изображения.
Область просмотра — видимая область вашей страницы в браузере, который вы используете для просмотра сайта, — также имеет размер. В CSS у нас есть единицы, которые относятся к размеру окна просмотра — vw для ширины окна просмотра и vh для высоты окна просмотра.
Используя эти единицы, вы можете изменить размер относительно области просмотра пользователя.
1vh равно 1% высоты области просмотра, а 1vw равно 1% ширины области просмотра. Вы можете использовать эти единицы измерения для размеров блоков, а также текста. В приведенном ниже примере у нас есть коробка размером 20vh и 20vw. В коробке лежит письмо A , которому присвоен размер шрифта размером 10vh.
Если вы измените значения vh и vw , это изменит размер окна или шрифта; изменение размера области просмотра также изменит их размеры, поскольку они имеют размер относительно области просмотра. Чтобы увидеть изменение примера при изменении размера области просмотра, вам нужно будет загрузить пример в новом окне браузера, размер которого вы можете изменить (как встроенный