Използване на системни интерфейсни шрифтове в уеб дизайна
Сега, може би за първи път от първия Macintosh, има смисъл да се заинтересувате от използването на системни шрифтове за интерфейса. Те са интересна и свежа алтернатива на уеб типографията - и те не изискват хостинг нито на вашия сървър, нито на трета страна. Как можете да използвате системни шрифтове на сайта и какви проблеми могат да възникнат тук?
През последните години имаше много интересни системни шрифтове за интерфейса. Google пусна Roboto (и продължава да разработва шрифта с редовни актуализации), Apple пусна Сан Франциско, а дизайнерът Eric Speakerman създаде шрифта Fira Sans за Mozilla. И това не е всичко, не забравяйте за Microsoft. Те започнаха тази тенденция с пускането на Windows Phone с език на дизайна Metro, силно обвързан с типографията като цяло и в частност с шрифта Segoe.
Последно поколение системни шрифтове за интерфейс на различни системи. (голяма версия)
Но използването им не е толкова лесно, колкото бихме искали. CSS поддържа тези шрифтове малко психеделично.
Забележка: „шрифт на системния интерфейс“ е шрифтът, използван за визуализиране на интерфейса на операционната система - не го бъркайте със системни шрифтове, т.е. шрифтове, инсталирани в системата на потребителя.
Два подхода
В момента има два начина за използване на шрифта на системния интерфейс в типографията.
Първият начин
Състои се в използването на кратка „магическа“ CSS декларация:
Някои от стойностите за кратко задаване на свойства на шрифта съществуват отдавна (надпис, икона, меню, поле за съобщения, малък надпис, лента на състоянието), но не съм забелязал широкото им използване.
Ето списък на тези стойности:
Този подход има недостатъци:
Втори начин
Вторият начин е да се изброят имената на всички шрифтове:
Той има и недостатъци:
Други възможности
Може да ви е интересно да комбинирате и двата горни подхода, за да постигнете най-добрия резултат. Уви, това не е лесно, защото свойствата на шрифта и семейството на шрифтовете се взаимно изключват - единият от тях винаги замества другия. Възможно е нещо да се получи чрез манипулиране на медийни заявки, но този метод е хак.
Шрифтът на системния интерфейс, използван само за предния край (вляво) и за целия сайт (вдясно). (Голяма версия) Автор на предния край - Коул Питърс.