Подключение шрифтов css. работа с веб-шрифтами. google fonts
Содержание:
- CSS Reference
- CSS Properties
- Font-family пример использования на сайте
- Безопасные шрифты на примере CSS
- What are the Five Font Families?
- Using Bold Text
- CSS Font Descriptors
- CSS Tutorial
- Описание
- CSS Properties
- The CSS font-family Property
- Стили шрифтов
- Четыре семейства шрифтов
- CSS Font Descriptors
- Definition and Usage
- Семейства шрифтов
CSS Reference
CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities
CSS Properties
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside
caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight
gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes
resize
right
row-gap
scroll-behavior
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
writing-mode
z-index
Font-family пример использования на сайте
- -> как переводится
-
С самого начала нашего повествования нужно перевести данную фразу font-family
Наверное вы догадались, что мы имеем дело с двумя словами английского языка:
Слово font — переводится как шрифт.
Слово family — переводится как семья.
Итого: font-family — переводится как семейство шрифтов
Как уже написано выше font-family переводится как семейство шрифтов.
Все шрифты делятся на семейства такие как:
Serif шрифты данного семейства имеют небольшие засечки на концах символов. Примеры шрифтов данного семейства: Times New Roman, Georgia.
Sans-Serif шрифты данного семейства не имеют засечек. Примеры: Arial, Arial Black, Trebuchet MS, Verdana.
Monospace font-family — все символы шрифтов данного семейства занимают одинаковую ширину. Примеры: Courier New.
Fantasy font-family — семейство «причудливых» шрифтов использующихся в основном для создания красочных заголовков. Примеры: Impact
Cursive font-family семейство шрифтов рукописного начертания. Примеры: Comic Sans MS.
Как написано в учебнике, что существуют безопасные шрифты, отображение которых практически на 100% вероятно это:
• Arial
• Arial Black
• Courier New
• Comic Sans MS
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana
-
Как вы наверное уже знаете, что стили css можно использовать и font-family соответственно также можно использовать тремя способами:
-
И несколько примеров использования font-family на странице сайта, возьмем самый простой способ поставим font-family внутрь тега: <p style=’font-family:Arial;’>Пример шрифта Arial.</p>
Пример шрифта Arial.
Пример шрифта Arial Black.
Пример шрифта Comic Sans MS.
Пример шрифта Courier New.
Пример шрифта Georgia.
Пример шрифта Impact.
Пример шрифта Times New Roman.
Пример шрифта Trebuchet MS.
Пример шрифта Verdana.
-
Мне кажется они забыли добавить, что есть возможность подключения и вывода вообще любого шрифта с помощью @font-face — о чем мы поговорим как-нибудь в другой раз…
+
И нельзя не упомянуть о том, что если на компьютере не установлен какой-то из шрифтов, который вы хотите использовать, то есть такое понятие – резервный шрифт.
+
/* Если на компьютере пользователя нет шрифта Verdana, то будет использован Arial, если на компьютере нет Arial, то будет использоваться один из шрифтов
семейства Sans-Serif имеющихся на компьютере */
p {font-family:Verdana,Arial,sans-serif;}+
И еще следует добавить что:
Некоторые font-family — не поддерживают кириллицу… поэтому, прежде чем использовать font-family, следует уточнить, есть ли поддержка кириллицы…
-
Некоторые вещи действительно очень скучные – font-family – это всего лишь отображение вашего написанного текста и ничего более! И наверное вы должны спросить, а почему же скучная тема — вы один раз это настроите на своем сайте и больше никогда к этому можете и не возвращаться… и конечно же , чтобы их настроить и установить — это нужно знать, как это работает и где у него кнопка !
Но с другой стороны, если вдуматься, то выбранный отвратительный font-family – будет только отталкивать ваших потенциальных адептов! И с этой же стороны font-family — имеет огромное значение! И как бы странно это не звучало, но по моему мнению лучше использовать стандартные параметры, которые привычны для любого человека…
Последняя дата редактирования : 2020-11-28 14:18
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Безопасные шрифты на примере CSS
При создании сайтов, одним из основных элементов является используемый шрифт. Частенько вебмастера любят применять на сайте экзотические шрифты. Это конечно может смотреться круто, но нужно, чтобы данные шрифты были также установлены и у посетителя сайта, обычно на компьютерах у всех имеются лишь стандартные шрифты.
Поэтому, в данной статье мы рассмотрим основные шрифты, которые имеются практически на каждом компьютере. Также приведём примеры, как нужно размещать имена шрифтов, чтобы текст показался в любом случае, даже если данный шрифт отсутствует на компьютере пользователя.
Шрифты в языке CSS, назначаются элементам с помощью свойства .
Список безопасных шрифтов (21 штука) и их примеры:
font-family: Arial, Helvetica, sans-serif; font-family: 'Arial Black', Gadget, sans-serif; font-family: 'Bookman Old Style', serif; font-family: 'Comic Sans MS', cursive; font-family: Courier, monospace; font-family: 'Courier New', Courier, monospace; font-family: Garamond, serif; font-family: Georgia, serif; font-family: Impact, Charcoal, sans-serif; font-family: 'Lucida Console', Monaco, monospace; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-family: 'MS Sans Serif', Geneva, sans-serif; font-family: 'MS Serif', 'New York', sans-serif; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-family: Symbol, sans-serif; font-family: Tahoma, Geneva, sans-serif; font-family: 'Times New Roman', Times, serif; font-family: 'Trebuchet MS', Helvetica, sans-serif; font-family: Verdana, Geneva, sans-serif; font-family: Webdings, sans-serif; font-family: Wingdings, 'Zapf Dingbats', sans-serif;
Обратите внимание, что сначала идёт распространённый шрифт (например Arial), если его на компьютере посетителя нет, то идёт более распространённый и похожий на него (например Helvetica), и в конце если оба эти шрифта отсутствуют, подключается , , или (данные способы начертания шрифта есть всегда). Arial
Имя шрифта: font-family: Arial, Helvetica, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Arial
Имя шрифта: font-family: Arial, Helvetica, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Arial Black
Имя шрифта: font-family: ‘Arial Black’, Gadget, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Bookman Old Style
Имя шрифта: font-family: ‘Bookman Old Style’, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Comic Sans MS
Имя шрифта: font-family: ‘Comic Sans MS’, cursive;
Цифры: 0 1 2 3 4 5 6 7 8 9
Courier
Имя шрифта: font-family: Courier, monospace;
Цифры: 0 1 2 3 4 5 6 7 8 9
Courier New
Имя шрифта: font-family: ‘Courier New’, Courier, monospace;
Цифры: 0 1 2 3 4 5 6 7 8 9
Garamond
Имя шрифта: font-family: Garamond, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Georgia
Имя шрифта: font-family: Georgia, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Impact
Имя шрифта: font-family: Impact, Charcoal, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Lucida Console
Имя шрифта: font-family: ‘Lucida Console’, Monaco, monospace;
Цифры: 0 1 2 3 4 5 6 7 8 9
Lucida Sans Unicode
Имя шрифта: font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
MS Sans Serif
Имя шрифта: font-family: ‘MS Sans Serif’, Geneva, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
MS Serif
Имя шрифта: font-family: ‘MS Serif’, ‘New York’, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Palatino Linotype
Имя шрифта: font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Symbol
Имя шрифта: font-family: Symbol, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Tahoma
Имя шрифта: font-family: Tahoma, Geneva, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Times New Roman
Имя шрифта: font-family: ‘Times New Roman’, Times, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Trebuchet MS
Имя шрифта: font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Verdana
Имя шрифта: font-family: Verdana, Geneva, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Webdings
Имя шрифта: font-family: Webdings, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Wingdings
Имя шрифта: font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Category:
Разное
What are the Five Font Families?
In typography, each font is a member of one of the five font families categorized based on their design similarities. They are:
Cursive (e.g., Zapf-Chancery)
The fonts in the Cursive family imitate human handwriting and the letters are usually joined together in a flowing manner. Many people associate Cursive fonts with faster writing and calligraphy.
Fantasy (e.g., Star Wars)
The Fantasy font family generally has decorative elements in each letter but still represents the characters. Many fictional books or films use typefaces from this font set for their titles to strengthen the nuance of the content.
Serif (e.g., Times New Roman)
The most notable feature of this font family is a small line at the end of a big stroke in a letter or symbol. They create a sense of formality and elegance. Various websites mainly use Serif for body text.
Sans-serif (e.g., Helvetica)
Unlike serif, Sans-serif doesn’t have the small line attached to every letter. Also, most fonts from this family usually have a similar stroke width, making it modern and minimalistic.
Monospace (e.g., Courier)
Each letter and symbol of Monospace fonts occupy the exact same space horizontally. Since the fonts are consistent and easy to distinguish, they are often used with typewriters and computer terminals.
What Font Should I Use for My Website?
We highly suggest that you use a web-safe font because it is compatible across various devices by default.
What’s also important, you need to choose a font that fits your website’s style and writing tone. It will make you look more professional and improves the user’s reading experience.
The great news is, you can easily find the most suitable font for your website in our recommendations below!
Using Bold Text
You must add another rule containing descriptors for bold text:
Example
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
The file «sansation_bold.woff» is another font file, that contains the bold characters for the Sansation font.
Browsers will use this whenever a piece of text with the font-family «myFirstFont» should render as bold.
This way you can have many rules for the same font.
CSS Font Descriptors
The following table lists all the font descriptors that can be defined inside the rule:
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default is «normal» |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default is «normal» |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default is «normal» |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is «U+0-10FFFF» |
❮ Previous
Next ❯
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 позволяет указать шрифт текста, который будет использован внутри элемента. Существует два способа указать шрифт для использования:
- family-name (имя шрифта) — название определённого шрифта из какого-нибудь семейства шрифтов, например: times , courier , arial , и т.д. Если название шрифта содержит пробелы, оно должно быть заключено в одиночные или двойные кавычки, например: «Times New Roman» .
- generic-family (семейство шрифтов) — набор шрифтов, обладающих общими характеристиками. Следующие семейства шрифтов по умолчанию доступны в любой операционной системе: serif , sans-serif , cursive , fantasy , monospace .
Описание стандартных семейств шрифтов:
- serif — шрифты с засечками
- sans-serif — шрифты без засечек
- cursive — представляют собой шрифты с большим количеством плавных красивых элементов оформления и всевозможных завитушек — это попытка повторить на компьютере рукописный текст
- fantasy — художественные и декоративные шрифты
- monospace — моноширинные шрифты, все символы которых имеют одинаковую фиксированную ширину
На разных компьютерах установлены различные операционные системы и каждая из них имеет свой собственный стандартный набор шрифтов, а также те шрифты, которые установил сам пользователь. Сам браузер не имеет никаких встроенных шрифтов, для отображения текста на веб-странице он использует те шрифты, которые установлены в операционной системе на компьютере пользователя. Таким образом при выборе шрифта на странице или на сайте в целом стоит учитывать тот факт, что набор шрифтов на вашем компьютере может сильно отличаться от набора шрифтов, имеющихся в наличии на компьютерах у других пользователей.
Чтобы решить проблему выбора используемого шрифта, свойство font-family позволяет в качестве значения указать не один шрифт, а целый список предпочтительных шрифтов, в этом случае их названия должны разделяться запятыми. Когда вы указываете более одного шрифта, всегда начинайте именно с того шрифта, который вы хотите использовать, и заканчивайте список указанием семейства шрифтов, чтобы браузер мог выбрать подходящий шрифт в семействе, если другие шрифты не доступны.
Когда браузер встречает первый указанный шрифт, он проверяет, установлен ли он на компьютере пользователя, и, если да, то использует его в качестве шрифта для элемента. Если шрифт не установлен, то проверяется второй шрифт и т.д. Если ни один из предпочитаемых шрифтов не найден, браузер выберет подходящий шрифт самостоятельно из указанного семейства шрифтов. Если указанные шрифты отсутствуют на компьютере пользователя, а общее семейство шрифтов не указано, браузер будет использовать шрифт, установленный по умолчанию в операционной системе.
Чаще всего при указании свойства font-family , используют «безопасные» (стандартные) Web-шрифты.
Чтобы на сайте отображался выбранный вами нестандартный шрифт для текста, который с высокой вероятностью будет отсутствовать у большинства пользователей, нужно совместно со свойством font-family использовать правило @font-face.
Шрифт в CSS — это ресурс, содержащий визуальное представление символов. На самом простом уровне он содержит информацию, которая сопоставляет коды символов с фигурами (называемые глифами), представляющие эти символы.
Шрифты, использующие общий стиль дизайна, обычно группируются в семейства шрифтов, классифицируемые набором стандартных свойств шрифта. Внутри семейства форма, отображаемая для данного символа, может варьироваться в зависимости от толщины обводки, наклона или относительной ширины.
Ресурсы шрифтов могут быть установлены локально на устройстве, в котором работает браузер. Для локальных ресурсов шрифта описательная информация может быть получена непосредственно из ресурса шрифта (например, из файла arial.ttf ). Для загружаемых ресурсов шрифтов, также называемых веб-шрифтами, описательная информация включена со ссылкой на ресурс шрифта (например, для шрифта Poiret One).
Используя различные шрифты для заголовков, абзацев и других элементов, можно задавать определенный стиль письменных сообщений, передавая желаемые эмоции и настроение. Окунаясь в многообразие шрифтов, не забывайте, что текст основного содержимого веб-страницы должен быть в первую очередь читабельным.
Не рекомендуется использовать более двух шрифтов на странице, а желаемого контраста можно достигнуть за счет комбинирования шрифтов разной толщины, размера, начертания или же при помощи цвета. Более подробно с правилами веб-типографики вы сможете ознакомиться в предложенной статье.
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
The CSS font-family Property
In CSS, we use the property to
specify the font of a text.
The property should hold several font names as a «fallback» system,
to ensure maximum compatibility between browsers/operating systems. Start with the font you want, and end with a generic family
(to let the
browser pick a similar font in the generic family, if no other fonts are
available). The font names should be separated with comma.
Note: If the font name is more than one word, it must be in quotation marks, like: «Times New Roman».
Example
Specify some different fonts for three paragraphs:
.p1 { font-family: «Times New Roman», Times, serif;}
.p2 { font-family: Arial, Helvetica, sans-serif;}
.p3 { font-family: «Lucida Console», «Courier New», monospace;}
❮ Previous
Next ❯
Стили шрифтов
Большинство шрифтов имеют разнообразные стили в пределах одного и того же шрифтового семейства. Обычно это жирный стиль (bold) или курсив (italic), часто встречается также стиль «жирный курсив» (bold italic), реже — капитель (малые прописные буквы — small-caps), а в ряде случаев — экстра-светлые/экстра-жирные или растянутые/сжатые версии.
В таблице ниже приведены несколько различных стилей. Многие из строк будут выглядеть одинаково, если у вас нет большой коллекции шрифтов.
| правило | serif | sans-serif |
|---|---|---|
| Стили | ||
| font-style: normal | Съешь же… | Съешь же… |
| font-style: italic | Съешь же… | Съешь же… |
| font-style: oblique | Съешь же… | Съешь же… |
| Насыщенность шрифта | ||
| font-weight: 100 | Съешь же… | Съешь же… |
| font-weight: 200 | Съешь же… | Съешь же… |
| font-weight: 300 | Съешь же… | Съешь же… |
| font-weight: normal | Съешь же… | Съешь же… |
| font-weight: 500 | Съешь же… | Съешь же… |
| font-weight: 600 | Съешь же… | Съешь же… |
| font-weight: bold | Съешь же… | Съешь же… |
| font-weight: 800 | Съешь же… | Съешь же… |
| font-weight: 900 | Съешь же… | Съешь же… |
| Варианты | ||
| font-variant: normal | Съешь же… | Съешь же… |
| font-variant: small-caps | Съешь же… | Съешь же… |
| Растяжение | ||
| font-stretch: ultra-condensed | Съешь же… | Съешь же… |
| font-stretch: extra-condensed | Съешь же… | Съешь же… |
| font-stretch: condensed | Съешь же… | Съешь же… |
| font-stretch: semi-condensed | Съешь же… | Съешь же… |
| font-stretch: normal | Съешь же… | Съешь же… |
| font-stretch: semi-expanded | Съешь же… | Съешь же… |
| font-stretch: expanded | Съешь же… | Съешь же… |
| font-stretch: extra-expanded | Съешь же… | Съешь же… |
| font-stretch: ultra-expanded | Съешь же… | Съешь же… |
Модуль «Шрифты» в CSS имеет больше свойств для указания специальных стилей (для шрифтов, которые поддерживают несколько вариантов), в частности, свойство font-variant имеет гораздо больше значений.
Четыре семейства шрифтов
Первый – это антиквенный, или шрифт с засечками. Отлично подходит для длинных статей. Маленькие штрихи на концах «связывают» буквы и делают текст приятным для глаз и легко читаемым. К этой группе относятся: Times, Garamond, Baskerville, Georgia.
Если вы не знаете, какое сочетание выбрать, попробуйте следующий набор для CSS font-family:
Следующая большая группа шрифтов – sans-serif, или рубленые шрифты. В них нет засечек, они смотрятся не так витиевато, как антиквенные, но четко и понятно. Всегда используйте их для заголовков. Самыми популярными представителями являются CSS font-family Arial, Tahoma, Helvetica и Verdana.
Не так часто, как два предыдущих типа, используют моноширинные и декоративные шрифты. У моноширинного начертания одинаковая ширина символов, и они похожи на буквы печатных механических машинок. Нужны для отображения специального кода, например CSS. К font-family таких шрифтов относят Courier, Copperplate Light, Copperplate Gothic Light.
С декоративными шрифтами будьте осторожней. Избыточное количество декорированного текста делает из веб-страницы ярмарочного зазывалу. Но если невтерпеж, то внешний вид должен соответствовать контексту. Заголовок с CSS font-family Comic Sans MS будет нелепо смотреться на сайте о циркулярных пилах.
CSS Font Descriptors
The following table lists all the font descriptors that can be defined inside the rule:
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default is «normal» |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default is «normal» |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default is «normal» |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is «U+0-10FFFF» |
❮ Previous
Next ❯
Definition and Usage
The fontFamily property sets or returns a list of font-family names and/or
generic-family names for text in an element.
The browser will use the first value it recognizes.
There are two types of font-family values:
- font-family: The name of a font-family, like «verdana» or «arial»
- generic-family: The name of a generic font-family, like «serif» or «sans-serif»
Tip: Always specify a generic-family name as the last alternative!
Note: Separate each value with a comma.
Note: If a font-family name contains whitespace, it must be quoted.
Tip: Look at Web safe fonts
for commonly used font combinations.
Семейства шрифтов
После цвета шрифт — возможно, важнейшее свойство страницы. На этой странице я не буду демонстрировать никаких «трюков», но покажу ряд вариаций шрифтов, допустимых в CSS.
Поскольку не все шрифты доступны на всех компьютерах (существуют тысячи шрифтов и большинство из них не бесплатны), CSS предусматривает резервную систему. Первым вы указываете шрифт, который хотели бы использовать. Затем следуют любые шрифты, которые вы могли бы использовать, если первый указанный шрифт не доступен. А закончить список вы должны типовым шрифтом, который имеет 5 видов: serif, sans-serif, monospace, cursive и fantasy.
Следующая таблица показывает примеры различных шрифтов (ваш браузер может не знать их все) и вы можете увидеть, что ваш браузер делает с каждым из пяти типовых шрифтов:
| ‘sans-serif’: обычные шрифты без засечек | ||
|---|---|---|
| Arial, sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | |
| Helvetica, sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | |
| Verdana, sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | |
| Trebuchet MS, sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | |
| Gill Sans, sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | |
| Noto Sans, sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | |
| Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | |
| Arial Narrow, sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | |
| sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | |
| ‘serif’: обычные шрифты с засечками | ||
| Times, Times New Roman, serif | Съешь же ещё этих мягких французских булок да выпей чаю | |
| Georgia, serif | Съешь же ещё этих мягких французских булок да выпей чаю | |
| Palatino, URW Palladio L, serif | Съешь же ещё этих мягких французских булок да выпей чаю | |
| Bookman, URW Bookman L, serif | Съешь же ещё этих мягких французских булок да выпей чаю | |
| New Century Schoolbook, TeX Gyre Schola, serif | Съешь же ещё этих мягких французских булок да выпей чаю | |
| serif | Съешь же ещё этих мягких французских булок да выпей чаю | |
| ‘monospace’: шрифты фиксированной ширины | ||
| Andale Mono, monospace | Съешь же ещё этих мягких французских булок да выпей чаю | |
| Courier New, monospace | Съешь же ещё этих мягких французских булок да выпей чаю | |
| Courier, monospace | Съешь же ещё этих мягких французских булок да выпей чаю | |
| FreeMono, monospace | Съешь же ещё этих мягких французских булок да выпей чаю | |
| DejaVu Sans Mono, monospace | Съешь же ещё этих мягких французских булок да выпей чаю | |
| monospace | Съешь же ещё этих мягких французских булок да выпей чаю | |
| ‘cursive’: шрифты, имитирующие почерк | ||
| Comic Sans MS, Comic Sans, cursive | Съешь же ещё этих мягких французских булок да выпей чаю | |
| Bradley Hand, cursive | Съешь же ещё этих мягких французских булок да выпей чаю | |
| Brush Script MT, Brush Script Std, cursive | Съешь же ещё этих мягких французских булок да выпей чаю | |
| Snell Roundhand, cursive | Съешь же ещё этих мягких французских булок да выпей чаю | |
| URW Chancery L, cursive | Съешь же ещё этих мягких французских булок да выпей чаю | |
| cursive | Съешь же ещё этих мягких французских булок да выпей чаю | |
| ‘fantasy’: декоративные шрифты, для названий и т.д.. | ||
| Impact, fantasy | Съешь же ещё этих мягких французских булок да выпей чаю | |
| Luminari, fantasy | Съешь же ещё этих мягких французских булок да выпей чаю | |
| Marker Felt, fantasy | Съешь же ещё этих мягких французских булок да выпей чаю | |
| Trattatello, fantasy | Съешь же ещё этих мягких французских булок да выпей чаю | |
| fantasy | Съешь же ещё этих мягких французских булок да выпей чаю |
