5.11. Задание ключевых слов css в качестве значений
Для многих свойств CSS вы можете — или должны — присваивать значение с использованием предопределенных ключевых слов CSS. Специфические ключевые слова, которые можно использовать, определяются особенностью свойства. Например, можно назначить свойству display одно из трех ключевых слов: block, inline или none. Свойству color можно назначить одно из 16 ключевых слов, которые описывают основные цвета, такие как red (красный), green (зеленый), yellow (желтый) или fuchsia (фуксия), как в следующем примере:
PARA {color: fuchsia}
Свойству border-style можно назначить одно из девяти ключевых слов: solid, dotted, dashed, double, groove, ridge, inset, outset или none. Пример:
SECTION (border-style:solid)
5.12. Установка свойства font-family
В стандартной CSS-таблице предусмотрены следующие свойства, определяющие вид шрифта, используемого для отображения текста элемента:
font-family;
font-style;
font-weight;
font-variant.
Все эти свойства наследуются дочерними элементами.
Свойство font-family определяет имя шрифта (гарнитуру), используемого для отображения текста элемента. Например:
BOOK {font-family: Arial}
Можно задавать любое имя шрифта. (Имена шрифтов не являются ключевыми словами CSS.) Если браузер не может найти требуемый шрифт, он заменит его на другой доступный шрифт.
Если имя шрифта содержит пробелы, заключите название в кавычки, как в следующем примере:
BOOK {font-family: «Times New Roman»}
Можно расширить возможность выбора и привести несколько вариантов допустимых к использованию шрифтов в порядке приоритета, разделяя их запятыми. Например:
BOOK {font-family: Arial, Helvetica}
Если шрифт Arial недоступен, браузер использует шрифт Helvetica. Если шрифт Helvetica также недоступен, он заменит его на какой-либо другой имеющийся шрифт. Можно еще больше
расширить возможность выбора нужного
шрифта, включив в описание ключевое
слово CSS — обычно в конце списка -указывающее
на общий тип шрифта, который нужно
использовать.
Например:
BOOK {font-family: Arial, Helvetica, sans-serif}
В этом случае, если браузер не найдет шрифтов Arial или Helvetica, он использует какой-либо другой шрифт без засечек (sans-serif).
5.13. Установка свойства font-size
Свойство font-size устанавливает высоту шрифта, используемого для отображения текста элемента. Этому свойству можно присваивать четыре различных типа значений.
Значение, задающее размер относительно размера шрифта браузера. Вы можете задать размер шрифта относительно текущего размера шрифта браузера, присвоив свойству font-size одно из значений в виде ключевых слов, представленных в таблице 7.2. Для Internet Explorer 5 значение small заставит браузер использовать текущий выбранный размер шрифта; другие значения масштабируются с увеличением или уменьшением относительно этого размера.
Таблица 5.1
Задание размера шрифта относительно размера шрифта браузера
Ключевое слово для font-size | Пример правила CSS | Описание | Образец |
xx-small | TITLE {font-size: xx-small} | Наименьший размер шрифта, который может задаваться с помощью ключевого слова | Шрифт |
x-small | TITLE {font-size: x-small} | Приблизительно в 1,5 раза больше, чем xx-small | Шрифт |
small | TITLE {font-size: small} | Приблизительно
в 1,5 раза больше, чем xx-small. | Шрифт |
medium | TITLE {font-size: medium} | Приблизительно в 1,5 раза больше, чем small | Шрифт |
large | TITLE {font-size: large} | Приблизительно в 1,5 раза больше, чем medium | Шрифт |
x-large | TITLE {font-size: x- large} | Приблизительно в 1,5 раза больше, чем medium large | Шрифт |
xx-large | TITLE {font-size: xx- large} | Приблизительно в 1,5 раза больше, чем medium x-large | Шрифт |
Это значение предписывает IE
использовать его текущий размер шрифта Спецификация CSS
рекомендует использовать масштабный
коэффициент 1,5.
Однако в Internet Explorer
реальное соотношение между различными
значениями размера отличается в меньшей
степени. Например, medium в действительности
составляет примерно 1,15 от small.
Значение, задающее размер относительно размера родительского шрифта. Можно задать размер шрифта относительно текущего размера шрифта для родительского элемента, присвоив свойству font-size одно из следующих значений с помощью ключевых слов из таблицы 5.2.
Таблица 5.2
Задание размера шрифта относительно размера родительского шрифта
Ключевое слово для font-size | Пример правила CSS | Описание | Образец |
smaller | TITLE {font-size: smaller} | Размер шрифта приблизительно на 33% меньше размера шрифта для родительского элемента (или для корневого элемента, на 33% меньше размера шрифта браузера) | Шрифт |
larger | TITLE {font-size: larger} | Размер шрифта приблизительно на 50% больше размера шрифта для родительского элемента (или для корневого элемента, на 50% больше размера шрифта браузера) | Шрифт |
Значения 33 % и 50 %,
приведенные в таблице, основаны на
масштабном коэффициенте 1,5, рекомендованном
спецификацией CSS.
В действительности
результат может оказаться иным.
Задание размера в процентах от размера родительского шрифта. Вместо того, чтобы использовать ключевые слова smaller или larger, можно задать размер шрифта в процентах относительно текущего размера шрифта родительского элемента с большей степенью точности, задав свойству font-size значение в процентах. Например, следующее правило устанавливает размер шрифта, в полтора раза больше, чем размер шрифта родительского элемента:
TITLE {font-size: 150%}
(Если браузер использует рекомендуемый масштабный коэффициент 1,5, это правило будет эквивалентно правилу TITLE {font-size: larger}.)
Следующее правило устанавливает размер шрифта немного больше, чем установленный предыдущим правилом:
TITLE {font-size: 160%}
Заметим, что для
корневого элемента проценты берутся
относительно размера шрифта браузера.
(Более подробная информация содержится
па вставке «Задание значений в процентах».
)
Значения в процентах можно задавать не только для установки размеров родительского шрифта. Это необходимо если вы имеете дело с относительными размерами, а не с действительными абсолютными размерами.
Значение в процентах задает размер для некоторого свойства как процент от какого-либо значения. Какое это будет значение, зависит от того свойства, для которого выполняется назначение. Обычно это размер шрифта самого элемента. Например, следующее назначение устанавливает высоту строки в два раза большей, чем высота текущего шрифта элемента, в результате получаются строки с двойным интервалом:
SECTION {line-height: 200%}
Для свойства font-size, однако, значение в процентах берется относительно текущего размера шрифта родительского элемента. Например, следующее правило устанавливает для элемента высоту шрифта, составляющую три четверти от высоты текущего шрифта его родительского элемента:
PARAGRAPH {font-size: 75%}
Заметим, что если
элемент наследует значение свойства в
процентах.
Наследуется вычисленный
результат, но не сама величина в процентах.
(Другими словами, если ряд нисходящих
элементов наследует значение в процентах,
то размер для каждого последующего
уровня будет уменьшаться или увеличиваться.)
Задание численных значений размера. Можно также задать размер шрифта для элемента, присвоив свойству font-size абсолютное значение. Например, следующее правило устанавливает размер шрифта в 12 пунктов:
TITLE {font-size:12pt}
А это правило устанавливает размер шрифта в два раза больше, чем размер шрифта родительского элемента:
TITLE (font-size:2 em}
(Этот пример эквивалентен записи TITLE {font-size:200%}.)
Для многих свойств
CSS могут, или должны, быть присвоены
значения, выраженные в единицах размеров.
Такие значения задают размеры шрифтов,
положения фоновых изображений, расстояния
между символами, отступы, междустрочные
интервалы, величины полей и рамок, высоту
и ширину элементов, и другие свойства.
Абсолютное значение размера определяет точный размер с использованием стандартных единиц измерения, таких как дюймы, пункты или миллиметры. В таблице 7.4 приведен список различных единиц измерения, которыми можно пользоваться. Для каждой единицы представлена аббревиатура, которую необходимо применить для указания единиц измерения в правиле. Здесь же даны эквивалентные значения в других единицах измерения.
Таблица 5.3
Список абсолютных единиц измерения
Аббревиатура | Сантиметры | Дюймы | Миллиметры | Пики | Пункты | ||||
cm | 1 | 0,3937 | 10,0 | 2,3622 | 28,3465 | ||||
in | 2,54 | 1 | 25,4 | 6 | 72 | ||||
mm | 0,1 | 0,0393 | 1 | 0,2362 | 2,8346 | ||||
pc | 0,4233 | 0,1666 | 4,2333 | 1 | 12 | ||||
pt | 0,0352 | 0,0138 | 0,3527 | 0,0833 | 1 | ||||
cm — сантиметры; in — дюймы; mm — миллиметры; рс — пики; pt — пункты
Например, следующие два правила присваивают абсолютные значения размеров:
STANZA (font-size: 12pt}
PARAGRAPH {margin-top: 25in}
Относительное
значение задает размер относительно
высоты текущего шрифта элемента, или
относительно размера пикселя на экране
монитора, который используется для
отображения документа.
(Пиксель есть
элемент изображения — одна из отдельных
точек, составляющих изображение на
мониторе компьютера или экране
телевизора.) В таблице 5.4 представлены
различные виды относительных единиц
размера, которые можно использовать.
Таблица 5.4
Список относительных единиц измерения
Единица | Размерность единицы |
em | Высота текущего шрифта элемента |
ex | Высота строчной буквы х текущего шрифта элемента |
px | Размер пикселя на мониторе |
Имеется одно
исключение: когда вы присваиваете
свойству font-size значение в единицах еm
или ех, оно берется относительно размеров
шрифта родительского элемента.
Например, следующее правило добавляет к элементу отступ сверху. Высота поля отступа будет равна высоте шрифта элемента:
BOOK (margin-top: 1em}
Следующее правило создает верхнее поле высотой 15 пикселей:
SECTION {margin-top: 15px}
А это правило устанавливает высоту шрифта элемента в три четверти от высоты шрифта его родительского элемента:
PARAGRAPH {font-size:.75em}
(Это последнее правило эквивалентно правилу PARAGRAPH {font-size: 75%}.)
Заметим, что если дочерний элемент наследует относительное значение, наследуется результат вычисления, а не само относительное значение.
Как установить семейство шрифтов
CSS
Мы много говорили о том, что можно изменить с помощью CSS, чтобы изменить внешний вид вашего шрифта: как сделать его больше, как сделать его жирнее и как перемещать его по странице. Но мы еще не говорили о том, как установить, какой шрифт вы хотите использовать.
Тип шрифта, который вы выберете, определит, как будет выглядеть каждая буква, а стили сильно различаются.
Чтобы установить шрифт, используйте свойство font-family в CSS. Вот так:
семейство шрифтов:
Затем семейство шрифтов определяется в двух частях: во-первых, определенный шрифт, который вы хотите, а затем общий шрифт, который используется в качестве резервного.
Что вы подразумеваете под резервной копией?
Не все браузеры поддерживают все семейства шрифтов, поэтому, установив второе значение, вы знаете, что в худшем случае ваш шрифт будет выглядеть так, как вы задумали.
Это как когда в магазинах закончилась твоя любимая еда, и мне нужно купить другую: это не совсем то, что ты хотел, но достаточно близко.
Тебе легко говорить. Вам не нужно это есть.
На самом деле вы можете перечислить несколько шрифтов, если хотите, но убедитесь, что общее семейство шрифтов указано последним, чтобы оно использовалось только в качестве резервного.
Есть много примеров, поэтому давайте начнем с некоторых:
Sans Serif
семейство шрифтов: Helvetica, без засечек;
семейство шрифтов: Arial Narrow, без засечек;
семейство шрифтов: Tahoma, без засечек;
семейство шрифтов: Gill Sans, без засечек;
семейство шрифтов: Lucida, без засечек; Кто снял засечку?
Кто снял засечку?
Кто снял засечку?
Кто снял засечку?
Кто снял засечку?
Используйте поля ниже, чтобы попробовать несколько слов с каждым шрифтом. Посмотрите, как выглядит значение «без засечек» само по себе, чтобы увидеть резервный вариант.
семейство шрифтов:
Я снял засечки.
Serif
Помимо шрифтов без засечек, существуют также шрифты с засечками. У них немного больше роскоши, и поэтому они, как правило, выглядят немного старше или немного более традиционно.
семейство шрифтов: Times, serif;
семейство шрифтов: Палатино, с засечками;
семейство шрифтов: Baskerville, с засечками;
семейство шрифтов: Georgia, с засечками; У меня в сапогах змея!
У меня в сапогах змея!
У меня в сапогах змея!
У меня в сапогах змея!
Используйте поля ниже, чтобы попробовать несколько слов с каждым шрифтом.
Посмотрите, как выглядит значение «serif» само по себе, чтобы увидеть резервный вариант.
семейство шрифтов:
У меня в сапогах змея!
Моноширинный
В отличие от большинства шрифтов, буквы, написанные моноширинным шрифтом, имеют одинаковую ширину.
Обычно тонкие буквы, такие как i, занимают меньше места, чем более короткие буквы, такие как o или p; в моноширинных шрифтах все буквы занимают одно и то же место.
семейство шрифтов: Andale Mono, моноширинный;
семейство шрифтов: Courier New, моноширинный;
семейство шрифтов: PT Mono, моноширинный;
семейство шрифтов: Monaco, моноширинный; Последний рубеж.
Последний рубеж.
Последний рубеж.
Последний рубеж.
Попробуйте свой собственный моноширинный текст ниже. Не забудьте посмотреть, как выглядит «монопространство» само по себе.
семейство шрифтов:
В монопространстве никто не услышит твой крик.
Курсив
Курсивные шрифты больше похожи на рукописный текст, чем шрифты других семейств. Буквы, как правило, сливаются воедино, что делает их похожими на старое письмо.
Обратите внимание, что курсивные шрифты плохо отображаются на мобильных устройствах.
семейство шрифтов: Comic Sans MS, курсив;
семейство шрифтов: Bradley Hand, скоропись;
семейство шрифтов: Brush Script MT, скоропись;
семейство шрифтов: Apple Chancery, скоропись; Любимому владельцу
Дорогому владельцу
Дорогому владельцу
Дорогому владельцу
Откуда взялись эти имена?
Некоторые из них довольно странные.
Брэдли Хэнд, похоже, бухгалтер.
Все эти шрифты очень художественные и хорошо смотрятся на веб-сайтах, демонстрирующих фотографии, украшения и одежду.
Попробуйте написать свои собственные предложения курсивом, используя поля ниже.
семейство шрифтов:
Bradley Hand Accountancy
Fantasy
Теперь мы перешли к действительно диким шрифтам.
Есть серия шрифтов Fantasy.
Эти шрифты не похожи на шрифты, которые вы ожидаете увидеть на компьютере. Некоторые фэнтезийные шрифты выглядят так, как будто они подходят для постеров к старым западным фильмам, а другие выглядят так, будто их следует использовать для написания заклинаний.
семейство шрифтов: Luminari, фэнтези;
семейство шрифтов: "Boots & Spurs", фэнтези;
семейство шрифтов: Chalkduster, фэнтези;
семейство шрифтов: Trattatello, фэнтези;
семейство шрифтов: Papyrus, фэнтези; Котенок Билли
Котенок Билли
Котенок Билли
Котенок Билли
Котенок Билли
Попробуйте эти шрифты, используя поле ниже. Они довольно забавны.
семейство шрифтов:
НЕЛЬЗЯ СПАТЬ!
Советы
Ранее мы говорили об использовании одного или двух семейств шрифтов, а затем общего шрифта в качестве резервного.
Если вы хотите, вы можете добавить столько шрифтов, сколько хотите, если каждый из них разделен запятой. Браузер запустится с первого и продолжит список, пока не найдет шрифт, который может использовать.
Точно так же, как когда я хожу по полкам в поисках кошачьего корма, когда любимая Ария распродана!
Кроме того, весьма вероятно, что вы захотите использовать одно семейство шрифтов на всем своем веб-сайте, чтобы поддерживать единообразный вид на каждой странице.
Означает ли это, что я должен присвоить каждому текстовому элементу один и тот же класс?
Это один из способов сделать это; но есть более простой способ.
Точно так же, как вы ссылаетесь на классы или идентификатор в CSS, вместо этого вы можете ссылаться на тег HTML. Когда вы делаете это, ваш CSS применяется к каждому из этих элементов!
Таким образом, с помощью всего нескольких строк CSS вы можете настроить весь текст, созданный с помощью тега p, на использование одного и того же семейства шрифтов.
Звучит потрясающе! Но как это сделать?
Вместо # для обозначения идентификатора или файла . чтобы сослаться на класс, вы просто пишете HTML-тег.
Вот так:
р {
семейство шрифтов: Tahoma, без засечек;
} С этим кодом каждый элемент абзаца будет использовать один и тот же шрифт Tahoma.
Круто. Итак, чтобы покрыть все теги h, мне нужно всего лишь несколько операторов CSS, и весь мой текст будет покрыт!
Или…
Что? Вы можете сделать это с меньшими затратами?
О да, мой пушистый друг.
Вы можете написать CSS, применимый к нескольким типам HTML-элементов, просто перечислив их HTML-теги, разделенные запятыми.
Таким образом, с помощью всего лишь одной инструкции CSS вы можете установить шрифт для ВСЕГО веб-сайта!
Вот пример.
h2, h3, h4, h5, h5, h6, п {
семейство шрифтов: Tahoma, без засечек;
} Или вы можете применить CSS к телу HTML.
Помните, что тег body является важным тегом, и весь ваш HTML находится внутри него.
тело {
семейство шрифтов: Tahoma, без засечек;
} Ваш CSS будет применяться к каждому элементу HTML внутри вашего тела HTML. И поскольку каждый элемент HTML находится в теле, он будет применяться ко всему!
Неплохо, да?
Честно говоря, вы ПОТРЯСАЛИ МНЕ РАЗУМ!
Взрыв мозга!
Предыдущий
Следующий
Спасибо, что прочитали.
Если вам понравилось, поделитесь, пожалуйста, чтобы другие могли найти нас!
Copyright © 2019 Dan Philo
Редактирование стилей и параметров шрифтов CSS на панели «Стили» — Microsoft Edge Development
Обратная связь Редактировать
Твиттер LinkedIn Фейсбук Эл.
адрес
- Статья
- 3 минуты на чтение
Для облегчения работы с типографикой в теперь доступен визуальный редактор шрифтов .0277 Панель стилей . С помощью редактора шрифтов вы можете изменять настройки шрифта, и изменения немедленно отображаются в браузере — и все это без глубоких знаний CSS. Инструмент Elements > вкладка Стили > значок Font Editor открывает редактор шрифтов , который состоит из двух частей:
- Селектор Font Family .
- Редактор свойств CSS .
Типографика в Интернете является важной частью взаимодействия с пользователем.
Вы хотите убедиться, что шрифты соответствуют корпоративным правилам бренда, а ваш контент отображается должным образом на различных устройствах. Текст должен легко читаться, используя размер и высоту строки. Пользователи могут изменять размер шрифтов в соответствии с индивидуальными потребностями.
В ситуациях, когда определенные шрифты недоступны на пользовательском устройстве, следует указать параметры резервного шрифта.
В последние годы CSS обеспечивает лучшую поддержку типографики. Для определения размера текста доступны десятки различных единиц CSS. Доступны несколько свойств CSS для управления размером шрифта, интервалом, высотой строки и другими типографскими функциями.
В настоящее время инструмент «Включить новый редактор шрифтов» на панели «Стили» является экспериментальным, и вам необходимо включить его для инструментов разработчика Microsoft Edge.
Любой CSS на панели Стили , будь то определения шрифтов или встроенные стили, имеет значок Редактор шрифтов .
Чтобы открыть визуальный редактор шрифтов , щелкните значок редактора шрифтов .
Редактор шрифтов открывается поверх панели Стили :
Все поля визуального редактора шрифтов заполняются значениями в CSS на панели Стили . Например, высота строки 9Для определения 0032 установлено значение 160% на панели Стили , поэтому в текстовом поле высоты строки отображается 160 , а в раскрывающемся списке единиц измерения отображается % . Кроме того, ползунок автоматически устанавливается в соответствии со значениями текстового поля.
Селектор семейства шрифтов
Селектор семейства шрифтов — это верхняя часть визуального редактора шрифтов . Чтобы выбрать шрифты правила CSS, в редакторе CSS используйте селектор Font Family . Вы можете выбрать основной и резервный шрифты для каждого правила CSS.
Редактор шрифтов открывается поверх панели Стили с выделенным селектором Font Family :
Используйте раскрывающийся список Font Family для выбора шрифта. Шрифты организованы в четыре группы:
- Вычисляемые шрифты , которые представляют собой шрифты, доступные в таблице стилей на панели Стили .
- Системные шрифты — шрифты, доступные в текущей операционной системе.
- Общие семейства шрифтов , такие как
с засечкамиилибез засечек. - Глобальные значения , такие как
наследует,начальныйине установлен.
Редактор шрифтов открывается поверх панели Стили с выделенным селектором семейства шрифтов :
После выбора шрифта отображается другое раскрывающееся меню, в котором можно выбрать резервные шрифты.
Вы можете выбрать до восьми резервных шрифтов. Чтобы удалить шрифт, нажмите кнопку Удалить значок семейства шрифтов .
Примечание
Если вы выберете глобальное значение для семейства шрифтов, вы не получите еще одно раскрывающееся меню, поскольку в CSS для него нет запасного варианта.
Редактор свойств CSS
Вы можете изменить свойства шрифта CSS в нижней части визуального Редактор шрифтов . Вы можете изменить размер шрифта, высоту строки, толщину шрифта и межбуквенный интервал, используя любой из элементов управления пользовательского интерфейса. Ваши изменения немедленно применяются в браузере.
Редактор шрифтов открывается поверх панели Стили с выделенными свойствами CSS:
Вы также можете преобразовывать единицы CSS с помощью визуального редактора шрифтов . Например, вы можете использовать этот инструмент для правила CSS, где ползунок Размер шрифта изначально установлен на 16 пикселей .
Теперь используйте раскрывающийся список единиц измерения и выберите значение em . Отображенное 1 em равно 16 пикселям .
Изменение размера шрифта на 16 пикселей :
Открытие раскрывающегося списка единиц для преобразования в em :
В раскрывающемся списке единиц представлены все доступные числовые единицы CSS. Для размера шрифта, высоты строки, толщины шрифта и интервала используются разные единицы измерения. Когда текстовые поля имеют фокус, вы можете нажимать клавиши со стрелкой вверх и со стрелкой вниз для точной настройки параметров. Чтобы использовать ползунки с клавиатурой, нажмите стрелка влево и стрелка вниз клавиши.
Редактор свойств CSS также содержит предустановленные ключевые слова. Чтобы использовать предустановленные ключевые слова, справа щелкните значок Toggle Input Type . Пользовательский интерфейс изменится, и отобразится раскрывающийся список предустановленных ключевых слов.