Вторник, 03 Июля 2012 10:18

Нестандартный шрифт на сайте

Written by 
Оцени эту запись
(1 Голос)

Для подключения нестандартного шрифта на сайт используется css-свойство @font-face. При помощи этого свойства вы описываете нужный шрифт, который далее можете легко использовать. Но перед подключением, нужный шрифт еще необходимо скачать.

 

Описание свойства @font-face в css-файле выглядит так:

 

 

@font-face {
    font-family:"Arial Black";
    src:url("../fonts/ArialBlack.eot?") format("eot"),
        url("../fonts/ArialBlack.woff") format("woff"),
        url("../fonts/ArialBlack.ttf") format("truetype"),
        url("../fonts/ArialBlack.svg#Arial") format("svg");
    font-weight:bold;
    font-style:normal;
}
 
 
Далее в документе для задания этого шрифта некоторому элементу нужно просто прописать:
 
 
font-family: "Arial Black",Arial;
 
Как можно заметить, в @font-face упоминаются разные файлы со шрифтами, точнее пути к ним:
 
 
src:url("../fonts/ArialBlack.eot?") format("eot"),
url("../fonts/ArialBlack.woff") format("woff"),
url("../fonts/ArialBlack.ttf") format("truetype"),
url("../fonts/ArialBlack.svg#Arial") format("svg");
 
 
Это необходимо для кроссбраузерности шрифта. Разные браузеры хотят видеть разные расширения файлов со шрифтом, потому вам нужно сказать их все и прописать. В данном случае, у меня рядом с папкой styles, в которой лежит css-файл, лежит папочка fonts, в которой лежат файлы - ArialBlack.eot, ArialBlack.woff, ArialBlack.ttf, ArialBlack.svg.
 
На самом деле, многие шрифты кажутся нам стандартными, то же Arial Black может быть у вас в Photoshop'е. Но если его нету на компьютере пользователя, посетившего ваш сайт, то браузер выведет ему текст тем шрифтом, которым пожелает. И это будет выглядеть не так красиво, как могло бы. 
 
Учтите, что шрифты стандартные для винды, совсем не обязательно будут (скорее почти обязательно не будут) стандартными для линукса и мака. Они еще и могут отличаться для разных версий операционных систем. Потому, если вы используете не Arial или Verdana, то лучше перестраховаться.
 
Еще момент, выбирайте шрифт, поддерживающий кириллицу. Точнее, убедитесь в том, что выбранный вами шрифт ее поддерживает.
 
 
Вот нашла список шрифтов, которые есть у большинства пользователей разных ОС:
 
 
Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana
 
 
Но при этом, тот же  Arial Black даже на самой винде не хочет отображаться кроссбраузерно. Исправило ситуацию только его скачивание. Теперь, вроде, пашет))
 
Еще советую ознакомиться со статьей о соответствии шрифтов в разных ОС - Верстальщику о шрифтах. Часть II : Соответствия шрифтов Windows, Mac и Unix/Linux
 
 
Стало интересно где можно скачать шрифт? Для начала нужно воспользоваться гуглом)) Но я могу посоветовать несколько ресурсов:
 
http://www.font-cat.com/download-ru-6779.html  - для скачивания шрифтов
http://www.fontsquirrel.com/fontface/generator - генератор кода для font-face
 
 
 
 

Additional Info

Комментарии  

 
0 #1 Anemonalove 15.07.2017 23:56
Hello guys! Who wants to see me live? I'm live at HotBabesCams.co m,
we can chat, you can watch me live for free, my
nickname is Anemonalove , here is my photo:


https://3.bp.blogspot.com/-u5pGYuGNsSo/WVixiO8RBUI/AAAAAAAAAFA/JWa2LHHFI2AkHParQa3fwwHhVijolmq8QCLcBGAs/s1600/hottest%2Bwebcam%2Bgirl%2B-%2BAnemonalove.jpg
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов