Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html
Содержание:
- Где скачать шрифты для подключения к сайту через CSS?
- Шрифты в CSS
- Конвертация TrueType (TTF) и OpenType (OTF) шрифтов в EOT
- CSS Properties
- Нестандартные шрифты средствами HTML и CSS в Internet Explorer.
- CSS Advanced
- CSS Tutorial
- Установка шрифта и css-свойство font-family
- Ещё один способ подключить нестандартный шрифт в IE
- Подключение шрифтов с помощью Google Fonts
- Использование переменных шрифтов с помощью @font-face
- Как подключить нестандартный ttf или otf шрифт в CSS?
- Как установить шрифт текста
- Тэги изменения начертания шрифта
- Использование горизонтальных разделителей
- Шрифты с засечками
- color
- Зачем использовать пользовательские шрифты на вашем сайте WordPress?
Где скачать шрифты для подключения к сайту через CSS?
На сегодняшний день есть огромное количество различный ресурсов для скачивания шрифтов, но лично мне больше всего нравится вот этот: FontStorage.com
Вот его основные преимущества по сравнению с другими ресурсами:
Большой выбор шрифтов для сайта
Большинство шрифтов представлены сразу в нескольких форматах
Есть наглядный предпросмотр с возможностью изменять размер и выбирать варианты текста для разных языков.
Наличие сортировки по типу шрифта, тематике и поддерживаемым языкам (алфавитам), что немаловажно!
Как видите, в подключении шрифта в CSS нет ничего сложно. Используя показанный в этой статье способ, вы можете подключить к своему сайту любой понравившийся шрифт, и тем самым сделать его более интересным и оригинальным.
Красивые шрифты Google Fonts для вашего сайта
А на сегодня у меня все. Желаю вам успехов в создании сайтов!
До встречи в следующих статьях!
С уважением Юлия Гусарь
Шрифты в CSS
Говоря о внешнем виде текста нельзя не затронуть тему
шрифтов, которые самым прямым образом влияют на восприятие текста и его читабельность.
Шрифт – набор символов определенного размера и рисунка,
презназначенных для набора текста.
Как следует из определения, изменяя рисунок символов, а также их размер, можно получать различные виды шрифтов, которые будут соответствовать
общему дизайну сайта, делая его более уникальным и неповторимым. Взгляните на пример №1, на котором представлено
применение к одному и тому же фрагменту текста нескольких видов шрифта.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Шрифты</title>
<style>
.f_1{
font-family: arial, tahoma, sans-serif;
}
.f_2{
font-family: gabriola;
}
.f_3{
font-family: "high tower text", sans-serif;
}
.f_4{
font-family: "monotype corsiva", serif;
}
.f_5{
font-family: verdana, arial;
}
</style>
</head>
<body>
<p class="f_1">
Ко мне применяется шрифт Arial.
</p>
<p class="f_2">
Ко мне применяется шрифт Gabriola.
</p>
<p class="f_3">
Ко мне применяется шрифт семейства sans-serif.
</p>
<p class="f_4">
Ко мне применяется шрифт Monotype Corsiva.
</p>
<p class="f_5">
Ко мне применяется шрифт Verdana.
</p>
</body>
</html>
Пример №1. Использование различных видов шрифта
Разновидностей шрифтов довольно много, одни из них получили широкое распространение и по умолчанию входят в состав большинства операционных
систем и различного рода программ, другие нужно устанавливать из сторонних источников в зависимости от потребностей и желания пользователей. Что
касается браузеров, то они используют шрифты операционной системы, т.к. свои встроенные шрифты у них отсутствуют.
Конвертация TrueType (TTF) и OpenType (OTF) шрифтов в EOT
Об этом можно писать отдельную статью, потому, что средств сегодня достаточно много, хотя еще несколько лет назад, для этого была только одна программа, разработанная Microsoft под Windows (не доступная для пользователей других ОС).
Особого внимания заслуживает программка fontoptimizer написанная на PERL, и соответственно абсолютно кроссплатформенная.
Надо сказать, что мне доставило огромное удовольствие использоваие этой программы на моем Mac. Программа запускается прямо из терминала и позволяет не только конвертировать шрифты из ttf в eot, но сжимать их, удаляя ненужные биты и байты, и даже удаляя ненужные глифы (символы).
Скачать fontoptimizer можно здесь: fontoptimizer
Для того, чтобы сконвертировать шрифт из ttf в eot с помощью fontoptimizer достаточно вызвать в терминале (или в консоли)
convert-eot.pl --ttf-to-eot infile.ttf outfile.eot
CSS Properties
align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index
Нестандартные шрифты средствами HTML и CSS в Internet Explorer.
К слову Internet Explorer начал поддерживать нестандартные шрифты в CSS еще с 4-й версии (сегодня актуально 8-мая, и доступна 9-тая версии!). Но при этом, как всегда, технология Microsoft отдаёт маразмом. Для того, чтобы подключить сторонний шрифт в HTML необходимо перевести его в специфический формат EOT, который сам по себе ничем не отличается от TTF или OTF, но разработан Microsoft специально для внедрения в HTML.
С точки зрения CSS подключить нестандартный шрифт в CSS так, чтобы он правильно отображался в Internet Explorer можно так:
/*для Internet Explorer*/
@font-face {
font-family: PT-Sans; /* имя шрифта для CSS правил */
src: local("PT-Sans"), /* проверяем наличие шрифта в ОС пользователя */
url(fonts/PT-Sans.eot); /* если шрифт не установлен, тогда загружаем его по указанному пути */
}
/*для других броузеров*/
@font-face {
font-family: PT-Sans; /* имя шрифта для CSS правил */
src: local("PT-Sans"), /* проверяем наличие шрифта в ОС пользователя */
url(fonts/PT-Sans.ttf); /* если шрифт не установлен, тогда загружаем его по указанному пути */
}
То есть сначала нужно указать шрифт для Internet Explorer, а потом «затереть» его шрифтом для других броузеров. Когда Internet Explorer дойдет до правила с ttf или otf шрифтом, и не сможет подключить файл шрифта, он не станет изменять уже загруженный eot шрифт, в тоже время другие броузеры дойдя до второго правила с ttf шрифтом, успешно заменят шрифт качественным ttf.
CSS Advanced
CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients
CSS Shadows
Shadow Effects
Box Shadow
CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries
CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive
CSS Tutorial
CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL
CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand
CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders
CSS Margins
Margins
Margin Collapse
CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset
CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow
CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand
CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive
CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples
CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar
CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important
Установка шрифта и css-свойство font-family
Для того, чтобы указать шрифт, который будет использоваться внутри требуемого элемента, необходимо использовать наследуемое свойство
font-family, в качестве значения которого нужно указать через запятую имена шрифтов или
названия семейства шрифтов (см. пример №1). Если в названии шрифта содержатся пробелы, то его нужно указывать в кавычках. Также при выборе шрифтов
необходимо учитывать тот факт, что в операционных системах разных пользователей могут быть установлены собственные наборы шрифтов. Поэтому, если
хочется применить к элементу какой-нибудь экзотический шрифт, нужно обязательно учитывать эту особенность. В таких случаях обычно первыми указывают
редкие шрифты, затем более распространенные, а в конце указывают семейство шрифтов. Если браузер не находит первого шрифта на компьютере пользователя,
он начинает искать второй шрифт и так до конца списка указанных в качестве значения шрифтов. Это повышает вероятность того, что хотя бы один и
указанных шрифтов будет на компьютере пользователя. Если указанных шрифтов не обнаружено, браузер начинает самостоятельно подбирать шрифты из
указанного списка семейств шрифтов.
В любой операционной системе по умолчанию доступны следующие стандартные семейства шрифтов:
- serif – шрифты с засечками;
- sans-serif – шрифты без засечек (рубленые шрифты);
- cursive – курсивные шрифты (часто напоминают рукописный текст);
- fantasy – декоративные (художественные) шрифты;
- monospace – моноширинные шрифты (все буквы одинаковой ширины).
Если указанные в качестве значения свойства font-family шрифты не будут найдены
браузером на компьютере пользователя, а название семейства шрифтов будет отсутствовать, то браузер использует шрифт, установленный по умолчанию.
Обычно это шрифт Times New Roman.
Ещё один способ подключить нестандартный шрифт в IE
Internet Explorer, как известно достаточно странные броузер. Достаточно просто взглянуть на то, как именно он отображает стандартные правила CSS 2.1. У ранних версий (а именно у 6-й) есть баг в парсинге URL. Если URL в правиле CSS написать «#», то весь текст, идущий за «#» будет восприниматься как продолжение ссылки, даже если там указаны кавычки и другие мелочи. Поэтому можно подключить сторонний шрифт одним правилом font-face и для IE и для других броузеров. Вот таким образом:
@font-face {
font-family: 'PTSans';
src: url('css/fonts/ptsans.eot#') format('eot'),
url('css/fonts/ptsans.ttf') format('truetype');
}
Подключение шрифтов с помощью Google Fonts
Есть простой и удобный способ подключить нестандартный шрифт — использовать Google Fonts. Это бесплатный сервис, с помощью которого можно подключать шрифты, но не хранить их на своём сервере. Чтобы им воспользоваться, необходимо выбрать шрифт и добавить одно или несколько нужных начертаний, а затем вставить в ссылку, которую сгенерирует Google Fonts во вкладке Embed.
Этого достаточно, чтобы шрифт подключился. Теперь его можно использовать в свойстве без каких-либо дополнительных действий.
Стоит отметить, что после основного шрифта важно указать веб-безопасный. В случае, если нестандартный шрифт не загрузится, браузер воспользуется альтернативным
Его нужно подобрать максимально похожим на основной шрифт.
Плюсы этого способа — простота использования и всегда актуальные версии шрифтов, Google Fonts их часто обновляет. Но у него есть и минус — запросы к сторонним серверам могут негативно повлиять на скорость загрузки страницы
Если выбираете этот способ, стоит обратить внимание на оптимизацию
Использование переменных шрифтов с помощью @font-face
Использовать переменные шрифты в сети можно через определение правил @font-face, указывающих на файлы переменных шрифтов. Ниже мы кратко продемонстрируем, как это делается.
Примечание: При использовании переменных шрифтов CSS в сети есть несколько нюансов, связанных с кроссбраузерностью, почитать о них можно здесь.
В этом примере мы определяем две версии семейства шрифтов Source Sans, одну обычную и одну жирную. Обе версии используют один и тот же файл переменных шрифтов, но разные файлы шрифтов в качестве альтернативы для тех браузеров, которые не поддерживают переменные шрифты:
В правилах CSS эти шрифты можно записать обычным способом.
Также вы можете указать диапазон в правилах @font-face, чтобы сохранить возможность использовать все доступные значения в обычных правилах CSS:
С учетом вышеизложенного, вы можете использовать для свойства font-weight любое значение от 1 до 999. Не поддерживающие браузеры будут использовать значение шрифта normal.
Как подключить нестандартный ttf или otf шрифт в CSS?
В этом нет ничего сложного.
При помощи конструкции font-face в CSS мы можем указать путь к нестандартному ttf или otf файлу, проверить нет ли такого шрифта на компьютере и пользователя и указать имя шрифта, которое в дальнейшем сможем использовать в font-family. Делается это вот так:
@font-face {
font-family: PT-Sans; /* имя шрифта для CSS правил */
src: local("PT-Sans"), /* проверяем наличие шрифта в ОС пользователя */
url(fonts/PT-Sans.ttf); /* если шрифт не установлен, тогда загружаем его по указанному пути */
}
Теперь шрифт будет доступен по заданному font-family в любом правиле css, а если такой шрифт не установлен на компьютере пользователя, то будет загружен с сервера наряду с картинками. Чтобы использовать его в своих правилах достаточно указать правильно имя:
.my_customized_font{
/*...*/
font-family: PT-Sans;
/*...*/
}
После этого любой объект с классНеймом my_customized_font будет использовать нестандартный шрифт.
Но, как и всегда в случаях чего-то очень удобного и нестандартого, TrueType и OpenType шрифты не будут отображаться в броузерах от Microsoft.
Как установить шрифт текста
Давайте изменим шрифт стихотворения. Для этого применяют тэг <FONT>. Но если просто вставить тэг <FONT> наш текст не изменится. Для изменения шрифта нужно воспользоваться атрибутом FACE.
У этого атрибута есть свои параметры:
При записи
<FONT FACE="Times New Roman "> текст </FONT>
Слово «текст» будет иметь шрифт Times New Roman – с засечками.
При записи
<FONT FACE="Arial”> текст </FONT>
Слово «текст» будет иметь шрифт Arial – без засечек.
Зададим стихотворению шрифт Arial.
Пример:
<HTML> <HEAD> <TITLE> Стихотворение </TITLE> </HEAD> <BODY> <H1 ALIGN =” CENTER”> Унылая пора! Очей очарованье!... </H1> <H3 ALIGN = “RIGHT”> Александр Пушкин </H3> <FONT FACE=" Arial "> <P> Унылая пора! Очей очарованье! <BR> Приятна мне твоя прощальная краса — <BR> Люблю я пышное природы увяданье, <BR> В багрец и в золото одетые леса, <BR> В их сенях ветра шум и свежее дыханье, <BR> И мглой волнистою покрыты небеса, <BR> И редкий солнца луч, и первые морозы, <BR> И отдаленные седой зимы угрозы. <BR> </P> </FONT> <HR COLOR="yellow" SIZE="2"> </BODY> </HTML>
Замечание
Обратите внимание, что первым начался тэг , а за ним идет тэг
. А закрываем мы тэги в обратном порядке: сначала тэг
, а потом
Результат:
Тэги изменения начертания шрифта
Создадим новый документ.
Пример:
<HTML> <HEAD> <TITLE> Формулы </TITLE> </HEAD> <BODY> <H3 ALIGN = “CENTER”> Пример некоторых математических формул </H3> здесь будут записаны 2 математические формулы <H3 ALIGN = “CENTER”> Пример некоторых химических формул </H3> здесь будут записаны 2 химические формулы </BODY> </HTML>
Для строки «здесь будут записаны 2 математические формулы» установим курсивное начертание, для этого используем тэг <I>.
Пример:
<I> здесь будут записаны 2 математические формулы </I>
А для строки «здесь будут записаны 2 химические формулы» установим жирное начертание, используя тэг <B>.
Пример:
<B> здесь будут записаны 2 химические формулы </B>
Результат:
Тэг <SUB> отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.
Тэг <SUP> отображает шрифт в виде верхнего индекса. Текст при этом располагается выше базовой линии остальных символов строки и уменьшенного размера.
Пример:
<HTML> <HEAD> <TITLE> Формулы </TITLE> </HEAD> <BODY> <H3 ALIGN = “CENTER”> Пример некоторых математических формул </H3> <I> здесь будут записаны 2 математические формулы <BR> </I> (a+b) <SUP> 2</SUP> =a<SUP> 2</SUP> +2*a*b+b<SUP> 2</SUP> <BR> (a+b)*(a-b)=a<SUP> 2</SUP>-b<SUP> 2</SUP> <BR> <H3 ALIGN = “CENTER”> Пример некоторых химических формул </H3> <B> здесь будут записаны 2 химические формулы </B> H<SUB> 2</SUB> O <BR> H<SUB> 2</SUB> SO<SUB> 4</SUB> </BODY> </HTML>
Результат:
Использование горизонтальных разделителей
При оформлении текста можно воспользоваться горизонтальными разделителями. Для того чтобы их вставить нужно воспользоваться тэгом <HR>.Линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке. Этот элемент является одинарным тэгом и не требует закрытия.
У тэга HR есть параметры:
SIZE — устанавливает толщину линии.
Пример:
<HR SIZE=”3”>
WIDTH – устанавливает ширину линии в пикселах или процентах.
Пример:
<HR WIDTH =”300”> <HR WIDTH =”25%”>
COLOR – задает линии определенный цвет.
Пример:
<HR COLOR =”red”>
ALIGN определяет выравнивание линии.
Пример:
<HR ALIGN=”LEFT”>
Вставим горизонтальный разделитель после стихотворения с толщиной в 2 пикселя и желтым цветом.
Пример:
<HTML> <HEAD> <TITLE> Стихотворение </TITLE> </HEAD> <BODY> <H1 ALIGN = “CENTER”> Унылая пора! Очей очарованье!... </H1> <H3 ALIGN = “RIGHT”> Александр Пушкин </H3> <P> Унылая пора! Очей очарованье! <BR> Приятна мне твоя прощальная краса — <BR> Люблю я пышное природы увяданье, <BR> В багрец и в золото одетые леса, <BR> В их сенях ветра шум и свежее дыханье, <BR> И мглой волнистою покрыты небеса, <BR> И редкий солнца луч, и первые морозы, <BR> И отдаленные седой зимы угрозы. <BR> </P> <HR COLOR="yellow" SIZE="2"> </BODY> </HTML>
Замечание. Если для одного тэга мы применяем несколько атрибутов, то достаточно перечислить их через пробел.
Результат:
Шрифты с засечками
Такие шрифты характеризуются засечками — поперечными элементами на концах букв, которые называются ещё серифами (serif) (рис. 1).
Рис. 1. Текст, в котором используется шрифт с засечками
Засечки придают шрифту черты рукописных текстов, словно написанных пером, хотя современные виды шрифтов с засечками в большинстве своем уже не несут в себе следов каллиграфии.
Шрифты с засечками активно применяются для набора основного текста, поскольку это облегчает восприятие больших объемов текста. Засечки заставляют взгляд читателя скользить вдоль них и одновременно разделяют отдельные буквы, чтобы они не сливались между собой. Также такие шрифты могут использоваться и для написания заголовков. На экране монитора при уменьшении размера текста шрифт с засечками начинает хуже передавать начертание, поэтому для мелких надписей рекомендуется воспользоваться шрифтом без засечек.
color
Определяет цвет шрифта. Может задаваться следующими способами
По названию. Используются зарезервированные слова, обозначающие имена цветов (например, blue — синий, yellow — жёлтый). Самый простой, но вместе с тем и самый ограниченный метод, потому что поддерживает только 140 цветов, хотя обычно и их хватает.
p { color: red; }
По шестнадцатеричному коду (HEX). Шестнадцатеричная система счисления включает в себя 16 цифр, последние шесть из которых обозначаются буквами латинского алфавита от A до F, причём десятичное число 255 в этой системе записывается как FF. Как известно, все цвета создаются путём смешивания всего трёх: красного, зелёного и синего. Степень присутствия каждого из них и задаётся числами от 0 до 255, записанными в шестнадцатеричной системе. Перед числом ставится символ «решётка (#). Белый цвет — #000000, чёрный — #ffffff.
Пример ниже задаёт абзацу серый цвет:
p { color: #808080; }
В системе RGB. Всё те же красный, зелёный и синий (red, green, blue), но задающиеся уже числами от 0 до 255 через запятую. Присутствие каждого из трёх цветов можно обозначать и в процентах. Тогда 100% будет соответствовать числу 255.
a {color: rgb(0,128,201);}
RGBA. Всё, как в RGB, только в конце прибавляется ещё одно число от 0 до 1 — альфа-канал, задающий тексту прозрачность.
a {color: rgba(0,128,201,0.5);}
HSL. Значение в этом формате задаётся тремя параметрами через запятую.
1. H (hue — оттенок). Определяется в градусах от 0 до 359° в зависимости от цвета на цветовом круге (рисунок ниже).
2. S (Saturate — оттенок). Указывается в процентах. Понятно, что от 0 до 100%, и понятно, что чем больше процент, тем насыщеннее цвет.
3. L (lightness — яркость). Так же, как и насыщенность, устанавливается в процентах.
Зададим ссылкам насыщенный красный цвет
a {color: hsl(0,100%,100%);}
HSLA. То же, что и HSL, но с добавлением альфа-канала (как RGBA).
a {color: hsla(0,100%,100%,0.7);}
Зачем использовать пользовательские шрифты на вашем сайте WordPress?
Типография сама по себе является наукой, и мы не сможем дать вам полный курс по использованию шрифтов в веб-дизайне здесь. В конце концов, речь идет не только о шрифте, но и о его размере, наклоне, толщине и многом другом. Однако мы можем объяснить, почему использование пользовательских шрифтов на вашем сайте WordPress является хорошей идеей.
1. Типография – часть первого впечатления
Прежде всего, используемый вами шрифт во многом влияет на восприятие вашего сайта. Ваш сайт веселый и игривый? Вы профессионал в бизнесе? Посетители решают это одним взглядом, и ваша типография играет большую роль в их восприятии.
2. У шрифтов гораздо больше влияния, чем вы думаете
Это может повлиять на вашу способность учиться, запоминать тексты и даже влиять на ваше настроение.
Например, в одном исследовании было отмечено, что если вы хотите увеличить время, затрачиваемое на чтение текста, вам следует использовать шрифт с засечками. Однако, если вы хотите прочитать больше за короткое время, вам следует переключиться на шрифт без засечек.
Другое исследование показало людям одни и те же инструкции к упражнениям на разных шрифтах. Затем они попросили участников оценить, сколько времени им потребуется, чтобы выполнить указанные инструкции. Интересно, что те, у кого более сложный шрифт, догадались, что это займет у них больше времени, чем у группы с более простым шрифтом. Как следствие, они были менее склонны следовать упражнениям.
