Closed Zobakka closed 4 years ago
https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6
Мне кажется, использовать многочисленные переменные наподобие:
font-family: $Sans-semi-bold; font-family: $Sans-bold; font-family: $Sans-extra-bold;
не очень удобно, так как приходится постоянно вспоминать переменные и лазать по файлу, выясняя, что же у нас semi, extra и т.п.
На примере Вашего урока верстка Venev.ru:
получился бы файл fonts.scss:
@include font-face("Source Sans Pro", "../fonts/sourcesanspro-regular", 400, null, ttf woff2 woff); @include font-face("Source Sans Pro", "../fonts/sourcesanspro-semibold", 600, null, ttf woff2 woff); @include font-face("Source Sans Pro", "../fonts/sourcesanspro-bold", 700, null, ttf woff2 woff); @include font-face("Source Sans Pro", "../fonts/sourcesanspro-black", 900, null, ttf woff2 woff);
что срендерится в:
@font-face { font-family: "Source Sans Pro"; font-weight: 400; font-display: swap; src: url("../fonts/sourcesanspro-regular.ttf") format("truetype"), url("../fonts/sourcesanspro-regular.woff2") format("woff2"), url("../fonts/sourcesanspro-regular.woff") format("woff"); } @font-face { font-family: "Source Sans Pro"; font-weight: 600; font-display: swap; src: url("../fonts/sourcesanspro-semibold.ttf") format("truetype"), url("../fonts/sourcesanspro-semibold.woff2") format("woff2"), url("../fonts/sourcesanspro-semibold.woff") format("woff"); } @font-face { font-family: "Source Sans Pro"; font-weight: 700; font-display: swap; src: url("../fonts/sourcesanspro-bold.ttf") format("truetype"), url("../fonts/sourcesanspro-bold.woff2") format("woff2"), url("../fonts/sourcesanspro-bold.woff") format("woff"); } @font-face { font-family: "Source Sans Pro"; font-weight: 900; font-display: swap; src: url("../fonts/sourcesanspro-black.ttf") format("truetype"), url("../fonts/sourcesanspro-black.woff2") format("woff2"), url("../fonts/sourcesanspro-black.woff") format("woff"); }
В результате, при использовании одного шрифта Source Sans Pro, как в вышеупомянутом уроке, не надо будет вообще вспоминать конкретную переменную, а указывать только начертание, что просто взять из ФШ, Zeplin или еще откуда-либо:
font-weight: 900;
Источник:
https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6
Пояснение:
Мне кажется, использовать многочисленные переменные наподобие:
не очень удобно, так как приходится постоянно вспоминать переменные и лазать по файлу, выясняя, что же у нас semi, extra и т.п.
На примере Вашего урока верстка Venev.ru:
получился бы файл fonts.scss:
что срендерится в:
В результате, при использовании одного шрифта Source Sans Pro, как в вышеупомянутом уроке, не надо будет вообще вспоминать конкретную переменную, а указывать только начертание, что просто взять из ФШ, Zeplin или еще откуда-либо:
font-weight: 900;