CSS @font-face



@font-face - это правило, которое позволяет указать шрифты для отображения текста на веб-страницах.



Как использовать @font-face

1. Необходимо определить имя шрифта, и место где его можно найти.

@font-face {

font-family: DeliciousRoman;

src: url('http://www.font-face.com/fonts/delicious/Delicious-Roman.otf');

}

2. Затем уже его можно использовать.

p {

font-family: DeliciousRoman, Helvetica, Arial, sans-serif;

}



Также, можно подключать шрифты локально:

@font-face {

font-family: DeliciousRoman;

src: url('.../Delicious-Roman.otf');

}



Несколько дополнительных свойств @font-face:

font-display - Определяет как отображается шрифт, основываясь на том, был ли он загружен и готов ли к использованию.

font-stretch - с помощью него можно определить ширину начертания букв.

font-style - позволяет определить наклонный шрифт или курсив.

font-weight - определяет насколько “толстым” должно быть начертание букв.