Главная » Языки программирования

Setting Font Size

Содержание
  1. Изменение свойств шрифта
  2. Стандартные группы шрифтов
  3. Разница между шрифтами Serif и Sans-serif
  4. Примеры некоторых шрифтов
  5. CSS свойство font-family
  6. Веб-безопасные шрифты
  7. Лучшие веб-безопасные шрифты для HTML и CSS
  8. Шрифты, используемые в одном списке в качестве основных и резервных
  9. High Star
  10. HTML — Fonts
  11. Set Font Size
  12. Example
  13. Relative Font Size
  14. Example
  15. Setting Font Face
  16. Example
  17. Specify alternate font faces
  18. Setting Font Color
  19. Example
  20. The Element
  21. Example
  22. Example of the <basefont> Element
  23. CSS Fonts
  24. Font Selection is Important
  25. Generic Font Families
  26. Difference Between Serif and Sans-serif Fonts
  27. Some Font Examples
  28. The CSS font-family Property
  29. Example
  30. Стандартные и безопасные шрифты CSS
  31. Times New Roman

Изменение свойств шрифта

Очень важно для сайта выбрать правильный шрифт. От этого зависит то, как посетители будут воспринимать ваш сайт. Кроме этого шрифт создает идентичность вашего ресурса.

Шрифт добавляет весомость вашему тексту. Крайне важно использовать шрифт, который легко читать. Также важно выбирать правильный цвет и размер текста.

Стандартные группы шрифтов

В CSS существует пять стандартных групп шрифтов:

  • У шрифтов Serif у букв на краях есть небольшие зубцы. Эти шрифты создают ощущение элегантности и формализма.
  • Шрифты Sans-serif имеют прямые чистые линии (без каких-либо зубцов). Эти шрифты создают современный и минималистичный вид.
  • Буквы шрифтов Monospace имеют одинаковую фиксированную ширину. Эти шрифты создают ощущение работы механического устройства.
  • Курсивные шрифты имитируют написание от руки.
  • Фэнтезийные шрифты имеют декоративный/игривый вид.

Все различные имена шрифтов принадлежат к одной из стандартных групп шрифтов.

Разница между шрифтами Serif и Sans-serif

Примечание: Считается, что на экране компьютера шрифты sans-serif легче воспринимаются, чем шрифты serif.

Примеры некоторых шрифтов

Группа шрифтов Пример имен шрифтов
Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Курсивные Brush Script MT
Lucida Handwriting
Фэнтезийные Copperplate
Papyrus
Читайте также:  Php конвертация utf 8

CSS свойство font-family

Свойство font-family позволяет установить шрифт, которым будет отображаться текст веб-страницы, например, Times New Roman, Arial или Verdana.

Внимание! Если имя шрифта состоит из нескольких слов, то его следует заключать в кавычки, например, font-family: «Times New Roman».

Чтобы обеспечить максимальную совместимость между браузерами/операционными системами, в свойстве font-family следует определять несколько имен шрифтов, перечисленных через запятую. Начните с требуемого вам шрифта, а закончите стандартной группой (чтобы браузер самостоятельно подобрал шрифт из стандартной группы, если другие шрифты не доступны).

Определим несколько разных шрифтов для трех параграфов:

Веб-безопасные шрифты

Веб-безопасные шрифты это такие шрифты, которые универсально установлены для всех браузеров и устройств. Поэтому совершенно не разумно использовать редкие и мало известные шрифты, так как они могут отсутствовать на компьютере пользователя.

При этом стоит помнить, что не существует полностью на 100% веб-безопасных шрифтов. Всегда существует вероятность, что шрифт будет отсутствовать, либо установлен не корректно.

Поэтому крайне важно всегда использовать шрифты обратной совместимости.

Это означает, что в свойстве font-family вы должны определять список из похожих «резервных» шрифтов. Это делается для того, чтобы в том случае, когда у пользователя не установлен первый шрифт из определенных в свойстве, то браузер будет искать следующий по списку шрифт, затем следующий, и так до тех пор, пока не будет найден установленный у пользователя шрифт, либо будет достигнут конец списка. Заканчивать такой список всегда нужно именем стандартной группы шрифтов.

В следующем примере определяется три типа шрифта: Tahoma, Verdana и sans-serif. Второй и третий шрифты резервные на тот случай, если первый шрифт не будет найден:

Лучшие веб-безопасные шрифты для HTML и CSS

Список лучших веб-безопасных шрифтов для HTML и CSS:

  • Arial (sans-serif)
  • Verdana (sans-serif)
  • Helvetica (sans-serif)
  • Tahoma (sans-serif)
  • Trebuchet MS (sans-serif)
  • Times New Roman (serif)
  • Georgia (serif)
  • Garamond (serif)
  • Courier New (monospace)
  • Brush Script MT (cursive)

Шрифты, используемые в одном списке в качестве основных и резервных

Ниже представлены некоторые шрифты, используемые в одном списке в качестве основных и резервных:

Источник

High Star

Тег определяет все атрибуты шрифта. С его помощью мы можем указать тип, размер, цвет и некоторые другие свойства.

По умолчанию браузеры используют шрифт Times Roman, но если вы захотите изменить шрифт, это несложно сделать с помощью атрибута , но нужно иметь ввиду, что тот шрифт, какой вы укажете, может отсутствовать у пользователя, читающего вашу страничку, может не оказаться такого шрифта в системе, и он увидит тогда ваш текст в той кодировке, которая у него установлена по умолчанию. Но эту проблему можно решить другим способом: указать браузеру не один, а несколько похожих шрифтов.

Вот некоторые шрифты: Verdana, Arial, Helvetica, Courier, Times New Roman, Impact, Comic Sans MS, Half и многие-многие другие. Мы можем написать один и тот же текст разными способами:

Arial «> Шрифт Arial

Arial black «> Шрифт Arial black

Arial Narrow «> Шрифт Arial Narrow

Book Antiqua «> Шрифт Book Antiqua

Bookman Old Style «> Шрифт Bookman Old Style

Comic Sans MS «> Шрифт Comic Sans MS

Courier «> Шрифт Courier

Courier new «> Шрифт Courier new

Century Gothic «> Шрифт Century Gothic

Garamond «> Шрифт Garamond

Georgia «> Шрифт Georgia

Impact «> Шрифт Impact

Lucida Console «> Шрифт Lucida Console

Lucida Sans Unicode «> Шрифт Lucida Sans Unicode

Microsoft Sans Serif «> Шрифт Microsoft Sans Serif

Helvetica «> Шрифт Helvetica

Tahoma «> Шрифт Tahoma

Times New Roman «> Шрифт Times New Roman

Verdana «> Шрифт Verdana

Однако, несмотря на такое обилие шрифтов, всех их можно отнести к нескольким основным группам:

  • Serif — шрифт с засечками. Сюда относятся шрифты: Book Antiqua, Bookman Old Style, Garamond, Georgia, Times New Roman.
  • Sans-serif — шрифт без засечек (sans в переводе означает «без», то есть БЕЗ засечек!). К этой группе относятся шрифты: Arial, Century Gothic, Impact, Lucida Sans Unicode, Microsoft Sans Serif, Tahoma, Verdana.
  • Monospace — шрифт фиксированной ширины. Сюда можно отнести Courier New, Lucida Console.
  • fantasy — ну, к этим шрифтам относят те, которые не вошли в первую тройку. Примером может служить Comic Sans MS.

Источник

HTML — Fonts

Fonts play a very important role in making a website more user friendly and increasing content readability. Font face and color depends entirely on the computer and browser that is being used to view your page but you can use HTML tag to add style, size, and color to the text on your website. You can use a tag to set all of your text to the same size, face, and color.

The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the tag. The text that follows will remain changed until you close with the tag. You can change one or all of the font attributes within one tag.

Note −The font and basefont tags are deprecated and it is supposed to be removed in a future version of HTML. So they should not be used rather, it’s suggested to use CSS styles to manipulate your fonts. But still for learning purpose, this chapter will explain font and basefont tags in detail.

Set Font Size

You can set content font size using size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3.

Example

    Font size = "1" 
Font size = "2" 
Font size = "3" 
Font size = "4" 
Font size = "5" 
Font size = "6" 
Font size = "7"

This will produce the following result −

Relative Font Size

You can specify how many sizes larger or how many sizes smaller than the preset font size should be. You can specify it like or

Example

    Font size = "-1" 
Font size = "+1" 
Font size = "+2" 
Font size = "+3" 
Font size = "+4"

This will produce the following result −

Setting Font Face

You can set font face using face attribute but be aware that if the user viewing the page doesn’t have the font installed, they will not be able to see it. Instead user will see the default font face applicable to the user’s computer.

Example

    Times New Roman 
Verdana 
Comic Sans MS 
WildWest 
Bedrock

This will produce the following result −

Specify alternate font faces

A visitor will only be able to see your font if they have that font installed on their computer. So, it is possible to specify two or more font face alternatives by listing the font face names, separated by a comma.

When your page is loaded, their browser will display the first font face available. If none of the given fonts are installed, then it will display the default font face Times New Roman.

Note − Check a complete list of HTML Standard Fonts.

Setting Font Color

You can set any font color you like using color attribute. You can specify the color that you want by either the color name or hexadecimal code for that color.

Note − You can check a complete list of HTML Color Name with Codes.

Example

    This text is in pink 
This text is red

This will produce the following result −

The Element

The element is supposed to set a default font size, color, and typeface for any parts of the document that are not otherwise contained within a tag. You can use the elements to override the settings.

The tag also takes color, size and face attributes and it will support relative font setting by giving size a value of +1 for a size larger or −2 for two sizes smaller.

Example

     
This is the page's default font.
 
Example of the <basefont> Element
 
 This is darkgray text with two sizes larger 
 
 It is a courier font, a size smaller and black in color.

This will produce the following result −

Источник

CSS Fonts

Choosing the right font for your website is important!

Font Selection is Important

Choosing the right font has a huge impact on how the readers experience a website.

The right font can create a strong identity for your brand.

Using a font that is easy to read is important. The font adds value to your text. It is also important to choose the correct color and text size for the font.

Generic Font Families

In CSS there are five generic font families:

  1. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
  2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
  3. Monospace fonts — here all the letters have the same fixed width. They create a mechanical look.
  4. Cursive fonts imitate human handwriting.
  5. Fantasy fonts are decorative/playful fonts.

All the different font names belong to one of the generic font families.

Difference Between Serif and Sans-serif Fonts

Note: On computer screens, sans-serif fonts are considered easier to read than serif fonts.

Some Font Examples

Generic Font Family Examples of Font Names
Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus

The CSS font-family Property

In CSS, we use the font-family property to specify the font of a text.

Note: If the font name is more than one word, it must be in quotation marks, like: «Times New Roman».

Tip: The font-family 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. Read more about fallback fonts in the next chapter.

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;
>

Источник

Стандартные и безопасные шрифты CSS

Безопасные шрифты – это набор шрифтов, устанавливаемый вместе с операционной системой (Windows, MacOS, Unix/Linux).

Чтобы сайт в любой операционной системе открывался одинаково, принято в CSS-свойстве font-family задавать несколько названий шрифтов, перечисленных через запятую.

Последним указывается семейство шрифта, он используется, если в системе ни один из перечисленных не найден.

Список безопасных шрифтов:

‘Times New Roman’, Times, serif Съешь же ещё этих мягких французских булок
Georgia, serif Съешь же ещё этих мягких французских булок
Arial, Helvetica, sans-serif Съешь же ещё этих мягких французских булок
‘Arial Black’, Gadget, sans-serif Съешь же ещё этих мягких французских булок
Verdana, Geneva, sans-serif Съешь же ещё этих мягких французских булок
‘Trebuchet MS’, Helvetica, sans-serif Съешь же ещё этих мягких французских булок
Impact, Charcoal, sans-serif Съешь же ещё этих мягких французских булок
‘Comic Sans MS’, cursive, sans-serif Съешь же ещё этих мягких французских булок
‘Courier New’, Courier, monospace Съешь же ещё этих мягких французских булок

Далее о каждом шрифте подробнее:

Times New Roman

Источник

Оцените статью
© 2024 Программирование