Как подключить шрифты через CSS
С помощью правила @font-face можно легко подключить загруженные шрифты через CSS. Для этого в вашем css файле пропишите правило @font-face и кавычки (для задания свойств).
|
1 2 3 |
@font-face { /*Свойства } |
В свойствах необходимо задать имя шрифта, путь к нему, насыщенность и стиль:
|
1 2 3 4 5 6 |
@font-face { font-family: 'ИМЯ_ШРИФТА'; /*Имя шрифта*/ src: url("ПУТЬ_К_ФАЙЛУ/ИМЯ_ФАЙЛА.ttf") format("truetype"); /*Путь к фалу*/ font-weight: 500; /*Насыщенность*/ font-style: italic; /*Стиль*/ } |
Насыщенность (толщина) и стили шрифта бывают разными, но использовать можно только те, которые существуют у определенного шрифта. Например у Open sans доступны 5 типов насыщенностей: 300 (тонкий), 400 (стандартный), 600 (полужирный), 700 (жирный) и 800 (супер жирный). И 2 стиля: normal (стандартный) и italic (курсивный).
Пример подключения «Open sans»
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
/*Насыщенность: 300, стиль: нормальный*/ @font-face { font-family: 'open sans'; src: url("OpenSans-Light.ttf") format("truetype"); font-weight: 300; } /*Насыщенность: 300, стиль: курсивный*/ @font-face { font-family: 'open sans'; src: url("OpenSans-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; } /*Насыщенность: 400, стиль: нормальный*/ @font-face { font-family: 'open sans'; src: url("OpenSans-Regular.ttf") format("truetype"); } /*Насыщенность: 400, стиль: курсивный*/ @font-face { font-family: 'open sans'; src: url("OpenSans-Italic.ttf") format("truetype"); font-style: italic; } /*Насыщенность: 500, стиль: нормальный*/ @font-face { font-family: 'open sans'; src: url("OpenSans-SemiBold.ttf") format("truetype"); font-weight: 500; } /*Насыщенность: 500, стиль: курсивный*/ @font-face { font-family: 'open sans'; src: url("OpenSans-SemiBoldItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; } /*Насыщенность: 600, стиль: нормальный*/ @font-face { font-family: 'open sans'; src: url("OpenSans-Bold.ttf") format("truetype"); font-weight: 600; } /*Насыщенность: 600, стиль: курсивный*/ @font-face { font-family: 'open sans'; src: url("OpenSans-BoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; } /*Насыщенность: 700, стиль: нормальный*/ @font-face { font-family: 'open sans'; src: url("OpenSans-ExtraBold.ttf") format("truetype"); font-weight: 700; } /*Насыщенность: 700, стиль: курсивный*/ @font-face { font-family: 'open sans'; src: url("OpenSans-ExtraBoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; } |
Примеры присвоения тексту насыщенности и стиля:
- Насыщенность 400 (стандартная) и стиль — нормальный.
|
1 2 3 |
.text { font-family: 'open sans'; } |
- Насыщенность 600 и курсивный стиль.
|
1 2 3 4 5 |
.text { font-family: 'open sans'; font-weight: 600; font-style: italic; } |
Возможно, вам будет интересно:
