Как выбрать шрифт для медиа
DrumВ медиа чаще всего используются гарнитуры антиква и гротеск.
Андрей Абрамов, арт-директор дизайн-студии AIC:
Выбор самой гарнитуры — вопрос вкуса и стиля медиа. Здесь стоит ориентироваться на ощущения. Я рекомендовал бы почитать историю понравившегося шрифта — как и для каких целей автор создал его. Как минимум, это поможет избежать казусов при общем взгляде на проект.
Шрифты различаются по нескольким параметрам:
• кегль — размер шрифта;
• начертание — прямой, курсивный, перечеркнутый;
• насыщенность — тонкий, жирный, полужирный;
• ширина — нормальный, узкий, широкий;
• четкость — четкий, размытый;
• контраст.
Перед тем, как выбрать шрифт, выясните, платный он или бесплатный. Если шрифт платный, нужно понять, какой у него тип лицензии. Это можно сделать на сайте myfonts.com.
Также существуют условно-бесплатные шрифты. Их можно использовать при соблюдении условий, выдвинутых правообладателем. Например, в некоммерческих целях.
Дмитрий Осадчук, креативный директор Mail.Ru Group:
Шрифт — объект авторского права. Покупая или загружая шрифт, вы приобретаете лицензию — право использовать данный шрифт. Шрифтовые компании следят за использованием своих работ и, за использование шрифтов без лицензии могут подать в суд и взыскать огромные штрафы.
Отличная новость — хороших бесплатных шрифтов (в том числе и кириллических) становится все больше и больше. Но лицензионное соглашение на них также стоит читать внимательно (например paratype.ru/help/license/ptfree.asp )
Бесплатные шрифты имеют лицензию, позволяющую использовать их в коммерческих и личных целях. Такие можно найти в библиотеке Google Fonts или на Behance в разделе Typography по запросу free.
Есть два основных вида лицензий на шрифты:
Настольная лицензия — вы скачиваете установочный файл шрифта и используете его в графических редакторах и для печати.
Веб-лицензия — для использования шрифта на сайте. Она делится на три вида:
• с оплатой за просмотры;
• с подпиской на определенный срок;
• с подпиской на тариф: внутри тарифа могут стоять ограничения по количеству просмотров или времени использования.
Русские шрифты для сайта — Русские шрифты
Kaori
Русский шрифт
Century Gothic
Русский шрифт
Chinese Rocks Bold Cyrillic
Русский шрифт
Название: Chinese Rocks Bold Cyrillic | Категория: Необычные | Просмотров: 1767
Intro Rust G Base 2 Line
Русский шрифт
Название: Intro Rust G Base 2 Line | Категория: Стильные | Просмотров: 2284
Proxima Nova Condensed Black Italic
Русский шрифт
Название: Proxima_Nova_Condensed_Black_Italic | Категория: Жирные | Просмотров: 1768
Proxima Nova Condensed Black
Русский шрифт
Название: Proxima_Nova_Condensed_Black | Категория: Жирные | Просмотров: 1800
Proxima Nova Bold Italic
Русский шрифт
Название: Proxima_Nova_Bold_Italic | Категория: Жирные | Просмотров: 1218
Proxima Nova Bold
Русский шрифт
Название: Proxima_Nova_Bold | Категория: Жирные | Просмотров: 2196
Proxima Nova Black Italic
Русский шрифт
Название: Proxima_Nova_Black_Italic | Категория: Жирные | Просмотров: 1131
Proxima Nova Black
Русский шрифт
Название: Proxima_Nova_Black | Категория: Жирные | Просмотров: 1755
Русский шрифт ► PT Sans Narrow
Русский шрифт
Русский шрифт ► Caviar Dreams
Русский шрифт
Русский шрифт ► PT Sans
Русский шрифт
Русский шрифт ► PT Sans Italic
Русский шрифт
Русский шрифт ► PT Sans Bold
Русский шрифт
Название: PT Sans Bold | Категория: Толстые | Просмотров: 2133
Русский шрифт ► PT Sans Bold Italic
Русский шрифт
Название: PT Sans Bold Italic | Категория: Толстые | Просмотров: 1741
Русский шрифт ► Exo 2.0 Thin Italic
Русский шрифт
Название: Exo 2.0 Thin Italic | Категория: Тонкие | Просмотров: 2259
Русский шрифт ► Exo 2.0 Thin
Русский шрифт
Название: Exo 2.0 Thin | Категория: Тонкие | Просмотров: 3200
Русский шрифт ► Exo 2.0 Semi Bold Italic
Русский шрифт
Название: Exo 2.0 Semi Bold Italic | Категория: Толстые | Просмотров: 1627
Русский шрифт ► Exo 2.0 Semi Bold
Русский шрифт
Название: Exo 2.0 Semi Bold | Категория: Толстые | Просмотров: 1626
Русский шрифт ► Exo 2.0 Medium Italic
Русский шрифт
Название: Exo 2.0 Medium Italic | Категория: Стильные | Просмотров: 1718
Русский шрифт ► Exo 2.0 Medium
Русский шрифт
Русский шрифт ► Exo 2.0 Light Italic
Русский шрифт
Название: Exo 2.0 Light Italic | Категория: Стильные | Просмотров: 1635
Русский шрифт ► Exo 2.0 Light
Русский шрифт
Русский шрифт ► Exo 2.0 Italic
Русский шрифт
Русский шрифт ► Exo 2.0 Extra Light Italic
Русский шрифт
Название: Exo 2.0 Extra Light Italic | Категория: Тонкие | Просмотров: 1594
Русский шрифт ► Exo 2.0 Extra Light
Русский шрифт
Название: Exo 2.0 Extra Light | Категория: Тонкие | Просмотров: 2065
Русский шрифт ► Exo 2.0 Extra Bold Italic
Русский шрифт
Название: Exo 2.0 Extra Bold Italic | Категория: Жирные | Просмотров: 1908
Русский шрифт ► Exo 2.0 Extra Bold
Название: Exo 2.0 Extra Bold | Категория: Жирные | Просмотров: 1656
Русский шрифт ► Exo 2.0 Bold Italic
Русский шрифт
Название: Exo 2.0 Bold Italic | Категория: Толстые | Просмотров: 1235
Русский шрифт ► Exo 2.0 Bold
Русский шрифт
Название: Exo 2.0 Bold | Категория: Толстые | Просмотров: 1464
Русский шрифт ► Exo 2.0 Black Italic
Русский шрифт
Название: Exo 2.0 Black Italic | Категория: Жирные | Просмотров: 1608
Русский шрифт ► Exo 2.0 Black
Русский шрифт
Название: Exo 2.0 Black | Категория: Жирные | Просмотров: 1402
Русский шрифт ► Exo 2.0
Русский шрифт
Название: Exo 2.0 | Категория: Стильные | Просмотров: 1547
Русский шрифт ► RedOctober-Fat
Русский шрифт
Название: RedOctober-Fat | Категория: Жирные | Просмотров: 1792
Русский шрифт ► RedOctober
Русский шрифт
Название: RedOctober | Категория: Жирные | Просмотров: 1991
Русский шрифт ► Oranienbaum
Русский шрифт
Русский шрифт ► Philosopher Regular
Русский шрифт
Название: Philosopher Regular | Категория: Стильные | Просмотров: 2202
Русский шрифт ► Philosopher Italic
Русский шрифт
Название: Philosopher Italic | Категория: Стильные | Просмотров: 4323
Русский шрифт ► Philosopher BoldItalic
Русский шрифт
Название: Philosopher BoldItalic | Категория: Толстые | Просмотров: 1845
Русский шрифт ► Philosopher Bold
Русский шрифт
Название: Philosopher Bold | Категория: Толстые | Просмотров: 1709
Русский шрифт ► Poiret One
Русский шрифт
Название: Poiret One | Категория: Тонкие | Просмотров: 3190
Русский шрифт ► Play-Bold
Русский шрифт
Название: Play-Bold | Категория: Жирные | Просмотров: 1758
Русский шрифт ► Play
Русский шрифт
Название: Play | Категория: Стильные | Просмотров: 1652
Русский шрифт ► Marmelad
Русский шрифт
Русский шрифт ► SF UI Display Thin
Русский шрифт
Название: SF UI Display Thin | Категория: Тонкие | Просмотров: 2202
Русский шрифт ► SF UI Display Bold
Русский шрифт
Название: SF UI Display Bold | Категория: Толстые | Просмотров: 2126
Русский шрифт ► SF UI Display Medium
Русский шрифт
Русский шрифт ► SF UI Display Heavy
Русский шрифт
Название: SF UI Display Heavy | Категория: Толстые | Просмотров: 1631
Какой шрифт лучше использовать на сайте
Выбранный шрифт — аналог интонации и тембра нашего голоса в письменном обращении. Определенное начертание букв влияет на восприятие текстов, делает их более убедительными, или, напротив, добавляет легкомысленности и лишает делового настроя.
Из этой статьи вы узнаете, какие шрифты стоит использовать при разработке сайта, чтобы создать у пользователя необходимый эмоциональный настрой и облегчить восприятие информации в целом.
Шрифты с засечками
У шрифтов с засечками есть короткие штрихи на концах букв. Так писали еще древние римляне, когда высекали имена императоров на каменных плитах.
Известные представители этого вида — Times New Roman, Baskerville, Courier New.
По мнению многих исследователей и дизайнеров, такие шрифты лучше подходят не для онлайн-формата, а бумажных носителей — газет, книг, буклетов.
Шрифт с засечками вызывает ассоциации с:
- традиционностью;
- формальностью;
- утонченностью.
Поэтому его нередко используют на веб-ресурсах, которые представляют люксовые услуги. Давайте рассмотрим это на примере сайта, разработанного нами для элитного бизнес-клуба «Kelia».
Расположение бизнес-клуба в историческом центре Москвы, в старинном особняке на улице Воздвиженка, делает уместными ассоциации с
Ориентированность на деловую элиту, которая соблюдает определенный этикет, настраивает на некоторую формальность.
Камерная атмосфера, наличие консьерж-сервиса и отраженный на фотографиях богатый выбор дорогих вин подразумевает утонченность.
То есть, мы видим, что выбранный шрифт гармонирует с атмосферой сайта и самой сутью предлагаемой услуги.
Конечно, шрифты с засечками делятся на целый ряд подкатегорий, например:
- старого стиля;
- гаральды;
- переходного стиля;
- нового стиля;
- брусковые.
Однако, задача этой статьи — дать вам общее представление, не перегружая лишними деталями.
В целом же, согласно исследованиям, многие шрифты с засечками делают текст более убедительным.
Используйте шрифты с засечками, когда хотите акцентировать внимание на своей верности лучшим традициям и обстоятельному, серьезному подходу к делу.
Шрифты без засечек
Часто используется французское название этих шрифтов Sans Seriff, что в переводе означает «без засечек». Как и следует из названия, у этих шрифтов отсутствуют штрихи на концах букв.
Известные представители этого вида — Arial, Helvetica, Verdana.
Безусловно, шрифты без засечек тоже бывают разные, например:
геометрические — они основаны на правильных фигурах, толщина штрихов остается неизменной, например, Helvetica;
гуманистические — штрихи немного различаются, сами шрифты более художественны, каллиграфичны. Например, Optima.
Такие «рубленые шрифты», как их часто называют, используется в основном тексте в двух третях современных сайтов.
Шрифт без засечек вызывает ассоциации с:
- современностью;
- универсальностью;
- чистотой, аккуратностью.
Так, например, мы использовали шрифт без засечек на лендинге ICO блокчейн-платформы bubbletone.io.
Блокчейн — технология 21 века, которая открывает новые пути для решения привычных задач. Поэтому, уместно подчеркнуть современность.
«Чистота» сделок, аккуратность и точность в исполнении обязательств — вполне приемлемая ассоциация для проекта, привлекающего средства инвесторов.
Отметим, что шрифты без засечек с таким же успехом применяют во многих других нишах. Это и делает их в определенной степени универсальными. Здесь показателен пример шрифта Helvetica, который используется в 21% лого-надписей среди известных мировых брендов. Это компании из самых разных областей, например, McDonalds, Toyota, Skype.
Кстати, недавно мы применили созвучный идее современности и чистоты шрифт без засечек при создании логотипа для компании, которая обслуживает медицинское оборудование. Интересный был кейс.
Используйте шрифты без засечек, когда хотите подчеркнуть, что идете в ногу со временем, отличаетесь новаторством, либо гарантируете аккуратность и чистоту.
Нюансы работы с шрифтами
При продумывании внешнего вида текстов на вашем сайте, мы рекомендуем как минимум учитывать также следующие нюансы.
Опасность «украшательства» — будьте осторожны с декоративными и рукописными шрифтами. Они подходят для заголовков, привлекающих внимание. Однако, обычно они не годятся для набора основного текста — его становится попросту трудно читать.
Сочетаемость шрифтов — не стоить использовать на сайте более 2-3 шрифтов. При этом важно учесть сочетаемость их друг с другом по принципу гармонии и контраста. Для подбора гармоничных сочетаний шрифтов в сети существуют специализированные сервисы.
Языково-культурные особенности — важно понимать, что не все шрифты, полюбившиеся западным пользователям, имеют настолько же успешные кирилличные аналоги. Поэтому, когда читаете советы зарубежных дизайнеров, делайте поправку «на российскую действительность».
Отображение шрифтов — важно не только подобрать подходящие для тематики вашего сайта шрифты, но и позаботиться об их корректном отображении. Пользователи вашего веб-ресурса могут бороздить просторы интернета с самых разных устройств и операционных систем с отличающимися друг от друга предустановками. Из-за этого бывает, что тексты на сайте отображаются совершенно не так, как было задумано. Порою это выглядит очень небрежно и попросту обесценивает все остальные усилия веб-дизайнера.
Поэтому мы всегда учитываем этот момент при разработке сайтов. Мы указываем браузерам, какой шрифт использовать в качестве резервного. Так мы приобретаем контроль над тем, как будут выглядеть тексты на сайте при просмотре с самых разнообразных устройств.
Пользователь часто колеблется: обращаться ему в вашу компанию, или нет. Здесь каждый незначительный, на первый взгляд, нюанс влияет на конечное покупательское решение. Будьте внимательны, склоните чашу весов в свою пользу!
Чек-лист для самоконтроля
Непохожесть ассоциаций, которые вызывают шрифты разных типов, а также различие в легкости их восприятия — явные доказательства того, что в интернет-маркетинге нет мелочей. Вы можете использовать этот простой чек-лист для самоконтроля.
- Тексты на сайте легко читаются?
- Используемые шрифты гармонично сочетаются?
- Вы не используете более 2-3 шрифтов?
- Выбранные шрифты отображаются должным образом на любом устройстве?
- Вы можете обосновать, почему используете шрифты с засечками или без них?
- Соответствуют ли «характеры» выбранных шрифтов общей «атмосфере» сайта?
В целом же, для того, чтобы создать эффективный коммерческий сайт, «настраивающий» на покупку, нужно обладать широчайшим спектром знаний.
Именно поэтому, разработку вашего веб-проекта рациональнее будет доверить команде опытных специалистов, например, нам.
40 лучших шрифтов на Adobe Fonts (Typekit) на 2020 год · Typewolf
Typekit был официально переименован в Adobe Fonts в октябре 2018 года. С изменением названия в службу были внесены многочисленные улучшения — исчезли ограничения на синхронизацию рабочего стола, шрифты только для Интернета и ограничения на просмотр страниц. Также были добавлены тысячи дополнительных шрифтов, включая новые предложения из библиотеки Adobe Originals.
Качество коллекции Adobe Fonts значительно улучшилось за последние несколько лет, поэтому я хотел выделить некоторые из лучших шрифтов, доступных на сервисе.Порядок шрифтов, перечисленных ниже, не очень важен — это лишь некоторые из моих любимых шрифтов, которые сейчас кажутся популярными на Typewolf.
Adobe Fonts недоступен как отдельный продукт, в отличие от Typekit, поэтому для использования сервиса вам потребуется подписка на Creative Cloud. Creative Cloud предоставляет дизайнерам доступ к таким программам, как Photoshop, Illustrator, After Effects, InDesign и т. Д. Adobe Fonts бесплатно включен во все планы. Зарегистрируйтесь здесь, чтобы получить полный доступ к библиотеке Adobe Fonts.См. Ответы на часто задаваемые вопросы в разделе FAQ ниже.
Некоторые из представленных здесь названий шрифтов могут немного отличаться от названий, используемых в Adobe Fonts. Например, версия Gill Sans на Adobe Fonts известна как Gill Sans Nova . Я стараюсь поддерживать эту коллекцию в актуальном состоянии, но доступность определенных шрифтов может измениться в сервисе в любое время. Кроме того, версии шрифтов, показанные на снимках экрана ниже, могут отличаться от версии, доступной в Adobe Fonts, включая разные стили и функции шрифта.
* Примечание. Звездочка указывает на то, что семейство является дружественным к основному тексту, что означает, что оно содержит нормальный, курсив и жирный шрифт, а также имеет контраст обводки от низкого до среднего, большие счетчики, открытые апертуры и большую высоту по оси x.
Все ссылки на Adobe на этой странице являются реферальными. Если вы подпишетесь на тарифный план Creative Cloud для доступа к Adobe Fonts, я получу небольшую комиссию. Если вы считаете Typewolf полезным, используйте эти ссылки, чтобы продемонстрировать свою поддержку и помочь сайту работать. ♥
Получите все эти шрифты с Creative Cloud →
30 лучших бесплатных шрифтов для вашего логотипа
Когда дело доходит до брендинга, шрифт логотипа имеет первостепенное значение. Шрифт, который вы используете, является ключевым аспектом при разработке фирменного стиля. Вам нужно что-то приятное для глаз, обладающее уникальной индивидуальностью и актуальное в различных сценариях. При выборе шрифта учитывайте индивидуальность клиента, функциональность, для которой будет использоваться логотип, и вневременность дизайна.
Теоретически шрифт, который вы выберете, будет особенным для бренда клиента, но он должен иметь соответствующую лицензию. Таким образом, бесплатные шрифты являются идеальным исходным кодом для логотипов, поскольку их можно использовать в коммерческих целях бесплатно, что делает их легко доступными для любого человека с ограниченным бюджетом.
Креативные идеи логотипа можно найти здесь . Также мы собрали классные монограммы здесь .
Существует множество ярких и разнообразных вариантов дополнительных шрифтов для логотипов.Мы собрали 30 лучших бесплатных шрифтов для логотипов, доступных в настоящее время. Посмотрите, загрузите те, которые вам нравятся, и сообщите нам, использовали ли вы их в своих проектах! Хотя многие коллекции шрифтов, представленные здесь, можно использовать бесплатно, обязательно ознакомьтесь с условиями, связанными с каждым из них.
CLOUD SANS
Cloud имеет странную структуру в своем гуманистическом шрифте без засечек. Cloud Sans можно использовать для любых целей, он выделен курсивом и имеет пять значений — жирный и светлый можно скачать бесплатно!
QANELAS SOFT
Qanelas Soft — это профессиональный современный шрифт без засечек с геометрическими элементами.Это хорошая и красивая вариация начального семейства шрифтов Qanelas.
BEAVER
Студия дизайна Goob объединила этот замечательный шрифт без засечек и современный стиль.
TROCCHI
Названный в честь Александра Трокки, автора шотландского происхождения, Trocchi основан на традиционном дизайне и создан с использованием простых плоских засечек. Trocchi разработан для отображения и текстовых типов.
BEBAS NEUE
Этот шрифт без засечек создал Рёичи Цунекава на основе исходного бесплатного шрифта Bebas Neue.Его популярность резко возросла, и некоторые называют его «Helvetica из бесплатных шрифтов». К семейству добавился квартет: Light, Thin, Regular и Book, благодаря Fontfabric Type Foundry. Современные веса отдают должное изяществу и стилю Bebas с достойными формами, знакомыми чистыми линиями, сочетанием технической простоты и базовой теплоты, что делает его универсальным для печати, Интернета, искусства и коммерции.
VAST SHADOW
Vast — это маркетинг викторианской эпохи с засечками, в котором царит атмосфера солидарности, смешанная с оттенком изысканности.
NORWESTER
Разработанный Джейми Уилсоном, Norwester представляет собой сокращенный геометрический шрифт без засечек с маленькими заглавными буквами, прописными буквами, цифрами и различными символами.
POIRET
Новый роскошный геометрический шрифт с элементами конструктивизма и артистизма. Poiret — это особый шрифт с чистыми легкими формами, гладкими и простыми. Созданный с геометрическими формами, он отличается изящными поворотами и стильными линиями. Шрифт отлично подходит для больших знаков, заголовков, этикеток, заголовков и различных онлайн-форматов графического дизайна.Его также можно использовать для анимации, печати футболок, логотипов и плакатов.
AILERON
Вы можете бесплатно скачать красивый шрифт без засечек, известный как Aileron. Helvetica, разработанная Сора Сагано, дизайнером из Японии, повлияла на это семейство шрифтов. Сагано вставил свой стиль в классический шрифт и немного изменил его, чтобы сделать его более изогнутым.
KLAVIKA
Этот крутой шрифт можно увидеть в знаменитом логотипе Facebook.
GENTONA
Созданный Рене Бидером шрифт Gentona в неогротескном стиле без засечек.
RAMBLA
Для средне-длинных текстов популярным выбором является гуманистический гротеск — Rambla.
FENIX
Fenix - это шрифт с четкими штрихами и мощными засечками. Он красив в увеличенном виде и хорошо читается. В меньших размерах много рисунков.
HIPSTELVETICA
Hipstelvetica — это тестовый дисплей шрифтов, изначально разработанный для личного проекта. На это повлиял знаменитый дизайн Helvetica.
MODERAN
Zoki Design создал этот современный шрифт.
RECKLESS
Этот шрифт набран вручную и сделает ваш дизайн захватывающим и милым. Reckless можно использовать в коммерческих и личных целях, в том числе на футболках, приглашениях, плакатах, фирменных бланках и значках.
MAXWELL
| ||
Cool Text имеет 1 958 шрифтов, доступных для загрузки или использования с генератором.Категории шрифтовСамый популярный Новейшие3D Агрессивный Все заглавные буквы Древний Араб Азиатский Черный Блокировать Кровь Смелый Марка Название бренда Щетка Пузырчатый Каллиграфия Мультфильм Рождество Классический Комикс Сжатый Круто Кудрявый Курсив Пышные Милый Тьма Декоративные Дингбаты Dingfonts Проблемный Точечная матрица Капает Препарат, средство, медикамент Элегантный Известный Причудливый Быстрый Праздничный Пылающий Процветать Цветы Иностранный Причудливый Веселье Футуристический Игры Девчушки Готика Граффити Гранж Почерк Трудно читать Сердца Тяжелый Праздничный день Ужастик Огромный Промышленное Инициалы Международный Курсив Смешанный Дети корейский язык Любить Прекрасный Строчные буквы Магия Средневековый Современный Моноширинный Фильмы и ТВ Музыка Тайна Старый Контур Пират Пиксель Пиксель или маленький Простой Ретро Богатый Романтичный Закругленный Без засечек Научная фантастика Поцарапанный Сценарий Скрипт или кисть Засечки Sharp Плита Slab Serif Наклонный Маленькие заглавные буквы С шипами Звезды Трафарет Улица Стильный Высокий Технический Техно Толстый Тонкий Традиционный Племенной Печатная машинка Юникод арабский Unicode китайский Юникод японский Юникод корейский Жестокий Гравюра на дереве По названию шрифтаА B C D E F г ЧАС я J K L M N О п Q р S Т U V W Икс Y ZРекомендуемые шрифтыКатегории генераторовСамый популярный Анимированные Черный Синий Коричневый Горение Кнопка Повседневная Хром Проблемный Элегантный Тисненый Огонь Веселье Девчушки Глянцевый Светящийся Золото Градиент Серый Зеленый Тяжелый Праздничный день Ледяной Средневековый апельсин Контур Розовый Простой Пурпурный Красный Закругленный Научная фантастика Сценарий Тень Блестящий Небольшой Космос Искриться Трафарет Камень Триппи Валентинки Белый Желтый | ||
| Live Logo Stream Свяжитесь с нами Ссылка на этот сайт | ||
шрифт — CSS: каскадные таблицы стилей
font Сокращенное свойство CSS устанавливает все различные свойства шрифта элемента.В качестве альтернативы он устанавливает шрифт элемента на системный шрифт.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос. Как и в случае любого сокращенного свойства, любое отдельное значение, которое не указано, устанавливается равным соответствующему начальному значению (возможно, переопределяя значения, ранее установленные с использованием не сокращенных свойств). Хотя они не могут быть напрямую установлены с помощью шрифта font , longhands font-size-adjust и font-kerning также сбрасываются до своих начальных значений.
Это свойство является сокращением для следующих свойств CSS:
Свойство font может быть указано либо как одно ключевое слово, которое будет выбирать системный шрифт, либо как сокращение для различных свойств, связанных со шрифтом.
Если шрифт указан как системное ключевое слово, он должен быть одним из: заголовок , значок , меню , окно сообщения , маленький заголовок , строка состояния .
Если шрифт указан как сокращение для нескольких свойств, связанных со шрифтом, то:
- он должен включать значения для:
- он может дополнительно включать значения для:
-
font-style,font-optionиfont-weightдолжны предшествоватьfont-size -
font-optionможет указывать только значения, определенные в CSS 2.1, то естьнормальныхималеньких -
font-stretchможет быть только одним значением ключевого слова. -
line-heightдолжен сразу следовать заfont-size, которому предшествует «/», например: «16px / 3» -
font-familyдолжно быть последним указанным значением.
Значения
-
<'font-style'> - См. Свойство CSS
font-style. -
<'font-variant'> - См. Свойство CSS
font-variant. -
<'font-weight'> - См. Свойство CSS
font-weight. -
<'font-stretch'> - См. Свойство CSS
font-stretch. -
<'font-size'> - См. Свойство CSS
font-size. -
<'line-height'> - См. Свойство CSS
line-height. -
<'font-family'> - См. Свойство CSS
font-family.
Значения системного шрифта
-
подпись - Системный шрифт, используемый для элементов управления с субтитрами (например, кнопок, раскрывающихся списков и т. Д.).
-
значок - Системный шрифт, используемый для обозначения значков.
- Системный шрифт, используемый в меню (например, раскрывающихся меню и списках меню).
-
окно сообщений - Системный шрифт, используемый в диалоговых окнах.
-
с мелкими подписями - Системный шрифт, используемый для обозначения небольших элементов управления.
-
строка состояния - Системный шрифт, используемый в строке состояния окна.
- Ключевые слова системного шрифта с префиксом
- Браузеры часто реализуют несколько дополнительных ключевых слов с префиксом: Gecko реализует
-moz-window,-moz-document,-moz-desktop,-moz-info,-moz-dialog,- moz-button,-moz-drop-down-menu,-moz-listи-moz-field.
Настройка свойств шрифта
p {font: 12px / 14px sans-serif}
p {font: 80% sans-serif}
p {шрифт: полужирный курсив с большими засечками}
п {шрифт: строка состояния}
Живой образец
HTML
Измените переключатели ниже, чтобы увидеть сгенерированное сокращение и его эффект.