System Font Stack
Defaulting to the system font of a particular operating system can boost performance because the browser doesn’t have to download any font files, it’s using one it already had. That’s true of any “web safe” font, though. The beauty of “system” fonts is that it matches what the current OS uses, so it can be a comfortable look.
What are those system fonts? At the time of this writing, it breaks down as follows:
| OS | Version | System Font |
|---|---|---|
| Mac OS X | El Capitan | San Francisco |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Mavericks | Lucida Grande |
| Windows | Vista | Segoe UI |
| Windows | XP | Tahoma |
| Windows | 3.1 to ME | Microsoft Sans Serif |
| Android | Ice Cream Sandwich (4.0)+ | Roboto |
| Android | Cupcake (1.5) to Honeycomb (3.2.6) | Droid Sans |
| Ubuntu | All versions | Ubuntu |
Get to the snippet, already!
The reason for the preface is that it shows how deep you may need to go back to support system fonts. Additionally, it helps show that with new system versions, come new fonts, and thus the possibility of needing to update your font stack.
Method 1: System Fonts at the Element Level
One method for applying system fonts is by directly calling them on an element using the font-family property.
GitHub uses this method on their site, applying system fonts on the body element:
Both Medium and the WordPress admin use a similar approach, with a slight variation, most notably support for Oxygen Sans (created for the GNU+Linux operating system) and Cantarell (created for the GNOME operating system). This snippet also drops support for certain types of emoji and symbols:
Note: This method should only be used on the font-family property instead of the font shorthand. Booking.com published a thorough write-up on the warnings it generates due to the leading font appearing to be a vendor prefix.
Method 2: System Font Stacks
The limitation of the first method is that you have to call the full stack of fonts each time it’s used on an element and that can get cumbersome and bloat your code, depending on where and how it’s used.
Jonathan Neal offers an alternative method where system fonts are declared using @font-face .
The benefit here is that you can declare the fonts once and then that becomes the thing you can on the font-family property instead of the long list of fonts each and every time.
Note that Jonathan’s full example illustrates the capability to define variations of the system font family that was defined in the snippet above to account for italics, bolding, and additional weights.
Источник
CSS приемы. Стек системных шрифтов
Установка для сайта шрифтов, которые являются шрифтами по умолчанию для конкретной операционной системы, может значительно ускорить его работу, потому что браузеру не придется загружать какие-либо файлы шрифтов, ведь они уже есть в системе. Это верно для, так называемых, «веб безопасных» шрифтов. Прелесть «системных» шрифтов заключается в том, что они соответствуют настройкам, используемым в ОС, таким образом, мы получаем комфортный вид.
В каждой системе используются свои шрифты. Например:
| ОС | Версия | Системный шрифт |
|---|---|---|
| Mac OS X | El Capitan | San Francisco |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Mavericks | Lucida Grande |
| Windows | Vista | Segoe UI |
| Windows | XP | Tahoma |
| Windows | 3.1 — ME | Microsoft Sans Serif |
| Android | Ice Cream Sandwich (4.0)+ | Roboto |
| Android | Cupcake (1.5) — Honeycomb (3.2.6) | Droid Sans |
| Ubuntu | Все версии | Ubuntu |
Из всего сказанного становится понятно, как глубоко приходится копать, чтобы обеспечить поддержку всех системных шрифтов. При этом, необходимо учитывать, что с выходом новых версий операционных систем, приходят и новые шрифты, а вместе с этим наступает необходимость проводить обновление вашего стека шрифтов.
Итак, каким же образом можно задать свой набор системных шрифтов в CSS?
Метод №1: Системные шрифты на элементном уровне
Один из способов применить системные шрифты — это напрямую нацепить их на элемент при помощи свойства font-family.
Chrome и Safari недавно запустили команду «system-ui», которая является представлением базового семейства шрифтов. Ее можно использовать вместо строк «-apple-system» и «BlinkMacSystemFont» в следующем примере.
Известная платформа для разработчиков GitHub использует данный метод на своем сайте, применяя системные шрифты к элементу body:
Портал Medium и админ тема WordPress используют этот же подход с небольшими вариациями, наиболее заметными из которых является использование Oxygen Sans (для операционных систем GNU+Linux) и Cantarell (для систем GNOME). Этот сниппет также обеспечивает поддержку для некоторых типов символов и эмодзи:
Следует особо отметить, что данный метод должен использоваться только с CSS свойством font-family и не подходит для свойства font.
Метод №2: Стеки системных шрифтов
Ограничением первого метода является то, что приходится вызывать весь стек шрифтов всякий раз, когда он используется с каким-либо элементном. Это может сделать ваш код громоздким и чрезмерно раздутым.
Но есть и альтернативный метод , предложенный Джонатаном Нилом (Jonathan Neal), когда системные шрифты декларируются при помощи директивы @font-face.
Достоинством данного метода является то, что вы декларируете шрифты только один раз, и затем эта декларация становится постоянной вещью, которую можно использовать в свойстве font-family вместо длинного списка шрифтов, который вызывается всякий и каждый раз.
В полном примере Джонатана демонстрируется, как можно определить разные варианты семейства системных шрифтов, включая курсив, жирный шрифт и др.
Источник
font-family
CSS-свойство font-family определяет приоритетный список из одного или нескольких названий семейства шрифтов и/или общее имя шрифта для выбранного элемента.
Значения разделены запятыми, чтобы указать, что они являются альтернативами. Браузер выберет из списка первый шрифт, который установлен или может быть скачан используя правило @font-face .
Часто удобно использовать сокращённое свойство font , чтобы задать font-size и другие свойства, которые относятся к шрифту.
Вы всегда должны добавлять по крайней мере одно имя общего семейства шрифтов, так как нет гарантии, что какой-либо из указанных шрифтов будет доступен. Это позволит браузеру выбрать подходящий запасной шрифт, когда возникнет необходимость.
Свойство font-family определяет список шрифтов в приоритете от высшего к низшему. Процесс выбора шрифта не останавливается после первого шрифта, найденного в системе пользователя. Скорее, выбор шрифта выполняется по одному символу за раз, поэтому если в доступном шрифте нет глифы для нужного символа, пробуются следующие по списку шрифты. (Однако, это не работает в Internet Explorer 6 и ранее.) Когда шрифт доступен только в некоторых стилях , видах (en-US) или размерах , эти свойства могут так же влиять на выбор шрифта.
Синтаксис
Свойство font-family получает список из одного или более семейства шрифтов, разделённые запятыми. Каждое семейство шрифтов определяется как «> или «> .
В приведённом ниже примере перечислены два семейства шрифтов, первое «> , а второе как :
Значения
Общие семейства шрифтов используются как резервный механизм для сохранения некоторого авторского стиля в момент, когда ни один из желаемых шрифтов недоступен. Общие семейства шрифтов являются ключевыми словами и не должны браться в кавычки. Общее семейство шрифтов должно определяться последним в списке семейств шрифтов. Определены следующие ключевые слова:
serif Глифы имеют завершающие штрихи, расширяющиеся или сужающиеся концы, или имеют фактически зазубренные окончания.
Например, » Lucida Bright» , » Lucida Fax» , Palatino , «Palatino Linotype» , Palladio , «URW Palladio» , serif . sans-serif Глифы имеют гладкие окончания.
Например, «Open Sans» , «Fira Sans» , «Lucida Sans» , «Lucida Sans Unicode» , «Trebuchet MS» , «Liberation Sans» , «Nimbus Sans L» , sans-serif . monospace Все глифы имеют одинаковую фиксированную ширину.
Например, «Fira Mono» , «DejaVu Sans Mono» , Menlo , Consolas , «Liberation Mono» , Monaco , «Lucida Console» , monospace. cursive Глифы в курсивных шрифтах обычно имеют либо соединительные штрихи, либо другие рукописные характеристики, отличные от наклонных (italic) шрифтов. Глифы частично или полностью связаны, и результат больше напоминает рукописное перо или кисть, чем печатные буквы. Например, «Brush Script MT «, «Brush Script Std «, «Lucida Calligraphy» , «Lucida Handwriting» , «Apple Chancery» , cursive . fantasy Фэнтезийные шрифты — это прежде всего декоративные шрифты, которые содержат игривое представление персонажей. Например, Papyrus , Herculanum , Party LET , Curlz MT , Harrington , fantasy . system-ui Глифы, взятые из дефолтного шрифта пользовательского интерфейса на данной платформе. Поскольку типографские традиции широко варьируются по всему миру, это общее семейство предназначено для гарнитур, которые не отображаются точно в других общих семействах. math Это семейство предназначено для особых стилистических задач представления математики: верхний индекс и нижний индекс, скобки, которые пересекают несколько строк, вложенные выражения и двойные глифы с различными значениями. emoji Шрифты, специально предназначенные для отображения эмодзи. fangsong Особый стиль китайских иероглифов, который является чем-то средним между стилем с засечками Song и курсивным стилем Кай. Этот стиль часто используется для правительственных документов.
Валидные имена семейства шрифтов
Имена семейств шрифтов должны быть указаны либо в виде строк в кавычках, либо в виде последовательности одного или нескольких идентификаторов без кавычек. Если имя семейства шрифтов содержит цифры или знаки пунктуации, такое имя должно быть заключено в кавычки.
Например, следующие объявления являются валидными:
Следующие объявления являются не валидными:
Источник
SF Fonts web font allowed?
I am a web developer.
I would like to show off San Francisco fonts to the world.
I am developing a website to reduces loss of life and property.
I am NOT a lawyer, and I need a YES or NO answer.
Can I use the San Francisco Fonts as web fonts?
For those who do not understand Web Development, this means converting each SF Font to a web font format.
The standard web font formats are WOFF and WOFF2, beside either TTF or OTF.
So the web fonts for SF-Mono_regular.otf are:
SF-Mono_regular.otf, SF-Mono_regular.woff and SF-Mono_regular.woff2
Coded like this in CSS.
Deployed online as
Answers
>I am a web developer.
I think you meant Web Developer. Could be worse, tho, you could be a lawyer.
>I am NOT a lawyer
RU sure? You’re starting to sound like a lawyer, you know, ’cause of all that ‘loss of life and property‘ legalese.
>For those who do not understand Web Development
Some new, emerging technology, I think? Puts Actual Coding to shame, I hear.
>Can I use the San Francisco Fonts as web fonts? . this means converting each SF Font to a web font format. I need a YES or NO answer.
If you’re still reading, I suggest you/your lawyer review the readMe* (deployed during installation) that comes with the download/package.
You [a> need to be a registered (that means in possession of a valid, paid Developer Program account, something most web wonks, sorry, devs, or lawyers, usually don’t bother with, I think) dev** and, [b] are prohibited from using SFFont for anything but simulating System UIs in mockups.
* «A. Limited License. Subject to the terms of this License, you may use the Apple Font solely for creating mock-ups of user interfaces to be used in software products running on Apple’s iOS, iPadOS, macOS or tvOS operating systems, as applicable. The foregoing right includes the right to show the Apple Font in screen shots, images, mock-ups or other depictions, digital and/or print, of such software products running solely on iOS, iPadOS, macOS or tvOS. Your use of the Apple Font shall also be subject to any specific use restrictions with respect thereto as set forth in the Apple Font or Apple’s Human Interface Guidelines.
You may use this Apple Font only for the purposes described in this License and **only if you are a registered Apple Developer, or as otherwise expressly permitted by Apple in writing.»
KMT et al, thank you all for your careful consideration. Perhaps we need to step closer to reality. Design is a schematic and is visualized in application as optimal parts inclusion through manufacture, representing design.
In architecture, we call it, Draft: not public, a view of Type in Context.
Draft includes SF-Mono, SF-Pro, SF-Compact, and NewYork fonts, adding glyph icons (symbols).
Online collateral are found at fonts.gooogle.com as NewYork in Literata and SF in Montserrat group.
View symbols in Glyphs, TransType, Font Studio, etc.
Apply symbols with Ultra Character Map: drag-and-drop into text and image documents during Concept extension.
Adapt symbols using development tools like X-Code, Pixelmator and so on.
Apple San Francisco fonts [https://developer.apple.com/fonts], includes five font families, found here:
Download SF Pro Text, Download SF Compact, Download SF Mono, Download New York, Download SF Symbols.
(Links above.)
Not grouped in Emoji and Symbols. Some installed symbols match default Light/Dark appearance. So, if User forces Light at night, many symbols defaulting to white on white will be hidden. Whereas, night-time Dark or Auto appearance shows all symbols as white-on-Dark. Daytime, the opposite? Interesting visual adaptation.
Night-time Dark Appearance [all symbols are white on dark]
Night-time Light Appearance [most symbols are white on white, invisible]
Daytime development encounters the opposite effect! Nice.
Assume that SF-Symbol document display issues can be managed in the appropriate development environment. However, San Francisco fonts appear problematic for public User environments. Forcing a comfortable technology tightness. Deploy SF fonts in development only. For example, building 3×3 navigation cubes with Sublime Text and pixelmator. Note that no symbols are html entities. NewYork has no symbol.
Ultimately, San Francisco fonts can play a part in development of online communications, expressed as web page development. That is, some SF Symbol Glyphs can be deployed as inspiration: Pixelmator PNG drafts optimally extending into a typography production to construct a dynamic cube glyph suited to navigable display Context. Wherein SF cube symbols represent a massive Design challenge.
Frankly, outside of totalitarian regimes, SF inspirations should represent a natural extension of community technology. Lawyer interest would be quite incidentally. minimal. Graphic artists’ involvement would be a tangible expectation. Not excluding typographers, naturally. The dyadic demonstration of human symbolism cultures, clearly explains the universal limitation of navigation to the arrow point. Cave man logic. SF cubic symbols tease innovation pushing human mental extension. Of course respecting the crippled limitations of a digital development font, creative vector display enhances that development environment. Apple only inspiration. Naturally. Love it!
Источник
