@Kork888
Новичок

Как подключить шрифт в sass, чтобы он компилировался в css?

Допустим мне нужен шрифт OpenSansBold, как написать в sass ?
  • Вопрос задан
  • 45999 просмотров
Решения вопроса 2
shvaika
@shvaika
Front-end developer
Я бы посоветовал использовать пакет для подключения, в разных форматах.
Компиляция происходит очень просто https://fontie.pixelsvsbytes.com/webfont-generator
Выбираете: Formats ставите галочку на TrueType Font.
После этого, загружаете любой из скачанных шрифтов (формат не важен) нажав на ссылку выше "Add your font files (or just drop them on the page)". Жмем "Generate & download your @font-face package" и скачиваем архив с генерированными шрифтами.

Следующий шаг: Открываем архив и копируем все шрифты(.ttf, .eot, .svg, .woff и .woff2) в директорию с проектом в папку fonts. В скачанном архиве, открываем файл *.css он там один и копируем стиль для шрифта в отдельный файл стилей шрифтов (как правило это файл _fonts.sass) подключенный к основному стилевому файлу к примеру так: 64c67ead6d0547e2ab7b7c592fb51a72.PNG ...где fonts это имя вашего sass файла со шрифтами.
Пример комплекта подключения:
8a10e6026d6544d0a331c68a34aa52fe.PNG
(копируем в файл _fonts.sass) структура может изменяться исходя из имени вашего шрифта.

Данный способ универсален и более насыщен для работы, является более кроссбраузерным. Интеграция шрифта - как обычно.
Ответ написан
DarrellStanding
@DarrellStanding
Учусь Front-end разработке
Я делал так
@font-face
    font-family: "RobotoRegular"
    src : url("../fonts/RobotoRegular/RobotoRegular.ttf")


В отдельном файле fonts.sass , a затем подключал к основному файлу main.sass вот так
@import "app/sass/fonts.sass"
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@Kaloy_El
Create a font face rule. Embedded OpenType, WOFF2, WOFF, TrueType, and SVG files are automatically sourced.

@include font-face(Samplino, fonts/Samplino);
Rendered as CSS:

@font-face {
font-family: "Samplino";
src: url("fonts/Samplino.eot?") format("eot"),
url("fonts/Samplino.woff2") format("woff2"),
url("fonts/Samplino.woff") format("woff"),
url("fonts/Samplino.ttf") format("truetype"),
url("fonts/Samplino.svg#Samplino") format("svg");
}
Ответ написан
aidar_sh
@aidar_sh
Изучаю Css HTML Scss git
Новая большая книга CSS Д. Макфарланд , вам в помощь
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы