Добавяне на допълнителен шрифт в сайт със CSS

Сега ще разберете как да си добавите допълнителни шрифтове във вашият сайт, както и да се зареждат правилно на всички по-известни браузъри.

Шрифт се добавя със CSS (@font-face). @font-face се поддържа от Internet Explorer, Firefox, Opera, Chrome и Safari. Сега ще ви покажа примерен код по който ще работим:

 

@font-face {
    font-family: 'OpenSans';
    src: url('opensans-regular-webfont.eot');
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-regular-webfont.woff2') format('woff2'),
         url('opensans-regular-webfont.woff') format('woff'),
         url('opensans-regular-webfont.ttf') format('truetype'),
         url('opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

 

 

 

Има различни типове формати. Едни от най-използваните са: ttf, woff, woff2, eot и svg. Различните браузъри поддържат различни формати. Следващата таблица показва кой формат от кои браузъри се поддържа:

Формат Internet Explorer Chrome Firefox Safari Opera
TTF/OTF 9.0 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 Не се поддържа 36.0 35.0* Не се поддържа 26.0
SVG Не се поддържа 4.0 Не се поддържа 3.2 9.0
EOT 6.0 Не се поддържа Не се поддържа Не се поддържа Не се поддържа

*Деактивирано по подразбиране. Може да се активира.

 

Следва да видим, какви свойства има @font-face:

Свойство Стойности Описание
font-family name Задължително. Определя името на шрифтът
src URL Задължително. Определя пътя/щата където се намира/т.
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
Незадължително. Определя разтягането на шрифта. По подразбиране е "normal".
font-style normal
italic
oblique
Незадължително. Определя как трябва да бъде оформен шрифта. По подразбиране е "normal".
font-weight normal
bold
100
200
300
400
500
600
700
800
900
Незадължително. Определя колко да е плътен шрифта. По подразбиране е "normal".

 

Това е общата информация за @font-face. Един от най-известните @font-face генератори е fontsquirrel. С няколко клика може да конвертирате шрифт във всичките основни формати, както и да получите CSS с @font-face и демо.

 

 

Коментари

  • Отговори
    Мария
    от Мария на
    Здравейте :)

    Ако имаме а аз искам да използвам Roboto:400, Roboto:700 и Roboto:900 за заглавия h2, h4, h5 например. Как мога да придам специфичност на желаните заглавия, като
    font-family: 'Roboto', sans-serif; и никъде не се посочват съответните стилове regular 400, bold 700 и black 900, а само името съответния фонт?

  • Отговори
    Martin Bratvanov
    от Martin Bratvanov на
    Трябва да посочиш "font-weight" за веки таг в CSS правила:

    h2, h4, h5 {
    font-family: 'Roboto', sans-serif;
    }
    h2 {
    font-weight: 900
    }
    h4 {
    font-weight: 700
    }
    h5 {
    font-weight: 400
    }