Transfer. I left my system fonts in San Francisco
Both the new version of iOS 9, OS X 10.11 El Capitan, and even watchOS 2 saw the light. And they all share a new font - San Francisco. And as a young web developer, I was interested in the opportunity to use this font for web sites. This translation of the article “I Left My System Fonts In San Francisco” was born.
I, as a developer, very often have cases when it is necessary to use system fonts on web pages. And, often, these pages are embedded in our applications, like remote settings or documentation. In this context, it is very important that the end user has the content to fit in with his surroundings.
Well, soon we will all be confronted with the content displayed in San Francisco, and we will need to somehow indicate this very font in our CSS.
')
By tradition, we can try to specify the font San Francisco clearly, something in this style:
Unfortunately, the newly installed OS X 10.11 (El Capitan) does not have this font.
But how is this possible, is it the same system font?
Apple decided to abstract from the concept of "system font" and they did not give it an explicit name. Also, they reported that any hidden personal font names may vary. All such names will start with a dot, for example, the ultra-thin San font is named as .SFNSDisplay-Ultralight .
Apple motivates this need so that the operating system itself can better determine what type of font to use at the moment. I assume that they want to promote this chip for web as well. And as part of this abstraction, a new family appears under the common name: -apple-system.
The markup looks like this:
Even more unfortunately, it is poorly documented. Most of the information about this name I received from the WebKit source code . And it leaves the feeling that the work is not yet complete.
The second disappointment is that this generic name only works in Safari. Of course, it’s foolish to wait for such support of the “-apple” prefix from Chrome, when it is based on the WebKit fork. In addition to this, various system font styles have been added to Safari under iOS that fit into the concept of Dynamic Font Switching. And these keyword styles can be used starting with iOS 7 and beyond:
Since OS X cannot adapt dynamically, they are completely useless for desktops. And of course, there can be no talk of support from Chrome.
Also note that keywords will not work with a font-family value, they only work with a font value.
If you are a designer or developer for Apple devices, then you most likely put the San Francisco font manually. Do not be fooled. Most of the people who will visit your site will not have these fonts in their names. And yet, before downloading, you accept a license not to distribute the font, which does not allow using it as a web font.
So how to be a coder?
If you know that your content will only appear in the Apple browser, the markup is quite simple:
If you want to take into account Chrome and other browsers, then:
“.SFNSDisplay-Regular” is the hidden personal font name for the usual San Francisco style. Remember that these designations can be changed in any update!
But such a family as "system" does not yet exist. But I urge all browser developers to inherit such a technique. This will help developers on all platforms. On Android, Roboto or Noto will be used by default. And for systems like Windows, where users can choose the system font themselves, automatic selection will make it easier to adapt the content.
Here are a couple of screenshots with a demonstration for those who have not yet set themselves El Capitan.
Safari:
Chrome:
Link check yourself.
The purple string shows the correct font display in both browsers using the hybrid hack described above.
There is also information from the Safari blog that they work together with the W3C to standardize font-family: system
I would be glad if this information is even useful to someone.
I, as a developer, very often have cases when it is necessary to use system fonts on web pages. And, often, these pages are embedded in our applications, like remote settings or documentation. In this context, it is very important that the end user has the content to fit in with his surroundings.
Well, soon we will all be confronted with the content displayed in San Francisco, and we will need to somehow indicate this very font in our CSS.
')
By tradition, we can try to specify the font San Francisco clearly, something in this style:
body { font-family: "San Francisco", "Helvetica Neue", "Lucida Grande"; } Unfortunately, the newly installed OS X 10.11 (El Capitan) does not have this font.
But how is this possible, is it the same system font?
Apple decided to abstract from the concept of "system font" and they did not give it an explicit name. Also, they reported that any hidden personal font names may vary. All such names will start with a dot, for example, the ultra-thin San font is named as .SFNSDisplay-Ultralight .
Apple motivates this need so that the operating system itself can better determine what type of font to use at the moment. I assume that they want to promote this chip for web as well. And as part of this abstraction, a new family appears under the common name: -apple-system.
The markup looks like this:
body { font-family: -apple-system, "Helvetica Neue", "Lucida Grande"; } Even more unfortunately, it is poorly documented. Most of the information about this name I received from the WebKit source code . And it leaves the feeling that the work is not yet complete.
The second disappointment is that this generic name only works in Safari. Of course, it’s foolish to wait for such support of the “-apple” prefix from Chrome, when it is based on the WebKit fork. In addition to this, various system font styles have been added to Safari under iOS that fit into the concept of Dynamic Font Switching. And these keyword styles can be used starting with iOS 7 and beyond:
-apple-system-headline1
-apple-system-headline2
-apple-system-body
-apple-system-subheadline1
-apple-system-subheadline2
-apple-system-footnote
-apple-system-caption1
-apple-system-caption2
-apple-system-short-headline1
-apple-system-short-headline2
-apple-system-short-body
-apple-system-short-subheadline1
-apple-system-short-subheadline2
-apple-system-short-footnote
-apple-system-short-caption1
-apple-system-tall-body
Since OS X cannot adapt dynamically, they are completely useless for desktops. And of course, there can be no talk of support from Chrome.
Also note that keywords will not work with a font-family value, they only work with a font value.
If you are a designer or developer for Apple devices, then you most likely put the San Francisco font manually. Do not be fooled. Most of the people who will visit your site will not have these fonts in their names. And yet, before downloading, you accept a license not to distribute the font, which does not allow using it as a web font.
So how to be a coder?
If you know that your content will only appear in the Apple browser, the markup is quite simple:
body { font-family: -apple-system, "Helvetica Neue", "Lucida Grande"; } If you want to take into account Chrome and other browsers, then:
body { font-family: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande"; } “.SFNSDisplay-Regular” is the hidden personal font name for the usual San Francisco style. Remember that these designations can be changed in any update!
But such a family as "system" does not yet exist. But I urge all browser developers to inherit such a technique. This will help developers on all platforms. On Android, Roboto or Noto will be used by default. And for systems like Windows, where users can choose the system font themselves, automatic selection will make it easier to adapt the content.
Here are a couple of screenshots with a demonstration for those who have not yet set themselves El Capitan.
Safari:
Chrome:
Link check yourself.
The purple string shows the correct font display in both browsers using the hybrid hack described above.
There is also information from the Safari blog that they work together with the W3C to standardize font-family: system
I would be glad if this information is even useful to someone.
Source: https://habr.com/ru/post/268383/
All Articles