Основные шрифты
При создании сайтов, одним из основных элементов является используемый шрифт. Частенько вебмастера любят применять на сайте экзотические шрифты. Это конечно может смотреться круто, но нужно, чтобы данные шрифты были также установлены и у посетителя сайта, обычно на компьютерах у всех имеются лишь стандартные шрифты.
Поэтому, в данной статье мы рассмотрим основные шрифты, которые имеются практически на каждом компьютере. Также приведём примеры, как нужно размещать имена шрифтов, чтобы текст показался в любом случае, даже если данный шрифт отсутствует на компьютере пользователя.
Шрифты в языке CSS, назначаются элементам с помощью свойства font-family .
Список безопасных шрифтов (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 ), и в конце если оба эти шрифта отсутствуют, подключается serif , sans-serif , monospace или cursive (данные способы начертания шрифта есть всегда).
Стандартные и безопасные шрифты 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
How to Apply Comic Sans MS Font Style?
Fonts play the most essential role in enhancing user visibility and in improving the overall look of the website. The Comic Sans MS font is a member of sans serif font family. Due to its freestyle design, it is mostly used for children’s materials, informal documents, and other casual situations as well. This article demonstrates the implementation of Cosmic Sans MS font style using CSS.
How to Apply Comic Sans MS Font Style Using CSS?
Cosmic Sans font is not built-in/installed in most systems. Then don’t worry, this article covers the installation process and then applying font to HTML elements using CSS:
Step 1: Install Comic Sans MS Font
To download the “Comic Sans MS” font go to the “font-family” website or any other website like “Google Fonts”, “DaFont”, “UrbanFonts”, “Font Space”, “Font Squirrel”, “Fontesk”, or “Font Bundles”.
After opening the “font-family” website, insert the font name and click on the search button:
After that, scroll down the page and click on the download button:
After downloading the font, extract the “.zip” font file and then install all font files:
After clicking on the “Install for all users” option, all available variations of the font get installed on the system.
Step 2: Apply Comic Sans MS Font Style Using CSS
First, select the HTML element to which the font style is going to apply. Then, use the CSS property of “font-family” that sets the font. For instance, create a div and assign it a class of “Comicfont”.
Linuxhint is the place of heaven where you can find the answers for your queries related to programming languages. < / p >
Next, select the “Comicfont” class and use CSS “font-family” property to set the “Comic Sans MS” font to that div. Also, set the color and alignment for that div:
After executing the above code, the output looks like this:
The output confirms that the “Comic Sans MS” font has been applied to the element of the selected div.
Conclusion
To apply Comic Sans MS font, select the div HTML element and then apply CSS “font-family” property. Give it a value of “Comic Sans MS” that makes the font apply to that div element. This article has demonstrated how to apply the Cosmic Sans MS font style.
About the author
Abdul Moeed
I’m a versatile technical author who thrives on adaptive problem-solving. I have a talent for breaking down complex concepts into understandable terms and enjoy sharing my knowledge and experience with readers of all levels. I’m always eager to help others expand their understanding of technology.