Catalina brings a new system variable source attached to macOS.
Updated
the section 'system-ui' de la especificación de nivel 4 del módulo de fuentes CSS define un system-ui keyword de fuente que permite a los desarrolladores utilizar la fuente del sistema operativo predeterminada incorporada, turbo optimizada, localizada, de alta calidad, sin necesidad de descarga, directamente en sus sitios y aplicaciones.
body {
font-family: system-ui;
}This choice of font is similar to saying "use the default system font for this user's current locale."
On macOS, the system-ui The font is San Francisco, a font that a design team recently examined, tested, and… updated! We'll first cover the exciting new variable font features in Catalina, then we'll cover a couple of bugs and how the Chromium engineers solved them.
Esta publicación asume que ya está familiarizado con las fuentes variables. De lo contrario, consulte Introducción a las fuentes variables en la Web y el video a continuación.
Compatibilidad del browser
At the time of writing, system-ui has support for Chromium (from 56), Edge (from 79), Safari (from 11) and Firefox (from 43) but with the -apple-system keyword. Watch Can I use variable fonts? for updates.
New powers
The new skills that Catalina brought to the system source are now available to web developers starting with Chromium 83. system-ui source now has more variable settings- Optical size and 2 unique weight settings:
Mojave
h1 {
font-family: system-ui;
font-weight: 700;
font-variation-settings:
'wght' 750
;
}
Katherine
h1 {
font-family: system-ui;
font-weight: 700;
font-variation-settings:
'wght' 750,
'opsz' 20,
'GRAD' 400,
'YAXS' 400
;
}
These variant features are only available to macOS Catalina users.
In Mojave, system-ui is a variable font with just wght settings. While system-ui in Catalina it is a variable font with wght, opsz, GRADand YAXS settings.
Sounds like good progressive enhancement design opportunities to me! Really delve into the subtleties of the system font if you want.
wght
Accepts a font weight between 0 and 900 and applies equally to all characters.
font-variation-settings: 'wght' 750;opsz
Optical sizing is similar to kerning or letter spacing, but the spacing is done by a human eye rather than the math. A value of 19 or lower is intended for text and body spacing, while 20 o superior es para espaciar los títulos y los headers de la pantalla.
font-variation-settings: 'opsz' 20;GRAD
Similar to weight, but without touching horizontal space. Accepts values between 400 and 1000.
font-variation-settings: 'GRAD' 500;YAXS
Stretch the glyph vertically. Accepts values between 400 and 1000.
font-variation-settings: 'YAXS' 500;Combining the options
With a few lines of CSS, we can adjust the bold font settings of our choice or try other cool combinations:
font-weight: 700;
font-weight: bold;
font-variation-settings: 'wght' 750, 'YAXS' 600, 'GRAD' 500, 'opsz' 20;And so Chromium users on macOS see their custom 750 weight updated with some other fun tweaks 👍
Playground
Click Remix to edit in the Glitch below to get an editable copy of the Glitch, and then edit the new font-variation-settings options to see how it affects your font. Remember that this Glitch will only work if you are using a macOS Catalina device.
macOS 10.15 added new features to your system source, and in macOS 10.15 a hack system-ui The bug was logged in the Chromium bug tracker. I wonder if they are related !?
Appendix: The system-ui regression
El resto de esta publicación de Blog explica cómo system-ui broke Chromium 80 and how Chromium engineers fixed it. If this is not interesting or relevant to you, you can stop reading now.
This story begins with a different error: # 1005969. This was reported in macOS 10.15 because the system-ui font spacing seemed tight and crowded.
Background
Ever notice in macOS 10.14 how your paragraphs or headings "snap" to a different looking font when the size goes up or down?
In Mojave (macOS 10.14), the system-ui font switches between two fonts depending on the target font size. When the text was underneath 20px, macOS used "San Francisco Text". When the text was 20px or more, macOS used "San Francisco Display". The optical size was statically built on two separate sources.
Catalina (macOS 10.15) shipped a new joined variable source for San Francisco. No more "Text" and "Screen" management. Also won the new variation setting opsz previously described.
h1 {
font-variation-settings: 'opsz' 20;
}Unfortunately, the default opsz The value in the new Catalina font is 20and Chromium engineers weren't prepared to apply opsz to the system source. This led to the smaller sizes being too narrow.
To fix that, Chromium needed to apply opsz correctly to the system source. This led to Edition 1005969 fixing up. Victory! Or was it ...?
Not done yet
Here's where it got tricky: Chromium applied opsz but something still didn't look right. System fonts on Mac have an additional font table called trak, which modifies the horizontal spacing. While working on the solution, Chromium engineers noticed that on macOS, when retrieving horizontal metrics from a CTFontRef object, the trak the metrics were already being taken into account in the metric results. Chromium modeling library HarfBuzz you need metrics where the trak the values are not yet taken into account.
Internally, Skia (the graphics library, not the font of the same name) uses both the CGFontRef kind of CoreGraphics and the CTFontRef kind of CoreText. Debido a las conversiones internas requeridas entre esos objetos (utilizados para mantener la compatibilidad con versiones anteriores y acceder a las API necesarias en ambas clases), Skia perdería información de peso en ciertas circunstancias y las fuentes en negrita dejarían de funcionar. Esto fue rastreado en Edition 1057654.
Skia still needs to support macOS 10.11 because Chromium still supports it. At 10.11, the "San Francisco Text" and "San Francisco Display" fonts weren't even variable fonts. Rather, each was a separate font family for each available weight. At some point, their glyph IDs were out of sync with each other. So if Skia shaped the text (converting the text into glyphs that can be drawn) with "San Francisco Text", it would be gibberish if it were drawn with "San Francisco Screen" and vice versa. And even if Skia only requested a different size, macOS could switch to the other. It should be possible to always use one of the fonts and just scale it (using an array to scale it instead of asking for a larger size) but CoreText tiene un problema por el cual no escala los glifos sbix (emoji de color) hacia arriba (solo hacia abajo). Es un poco más complejo que eso. CoreText actually it seems to limit the vertical extent after applying the matrix which seems to be related to not being able to draw emoji at 45 degree angles. In any case, if you want your emoji to display large, you need to make a copy of the font to get a large version.
So to create copies of CTFont objects in different sizes internally while making sure the same underlying font data is used, Chromium pulled the CGFont out of the CTFont, then made a new CTFont from the CGFont (CGFont Objects are independent of size, the magic change occurs in the CoreText level). This worked fine until 10,154. At 10.15 this round trip ended up losing too much information, resulting in the weight problem. Flutter noticed the weight problem and made a workaround to resize to create the new CTFont directly from the original CTFont mientras controla el tamaño óptico directamente utilizando un attribute antiguo pero indocumentado en CoreText. This keeps things running on 10.11 and fixes other issues (like explicitly setting the optical size to the default).
However, this preserves more of the CoreText ‘magia’ en la fuente. Uno de estos parece ser que todavía modifica los avances de glifos de alguna manera que no be solo el trak table (whose Chromium app was already trying to suppress via another undocumented attribute).
CGFont doesn't do any of this 'magic', so maybe Chromium could get the CGFont out of the CTFont and only use it to get advances? Unfortunately this would not work because CoreText it is also known to spoil with fonts in other ways. For example, make small emoji slightly larger than you actually requested (increasing their size a bit). CGFont you don't know about this so you would end up with your sbix based emoji too close to each other as you would be measuring in one size but CoreText it would make them bigger by a certain amount. Chromium wants the CTFont You move on, but you want them untracked, and preferably without any other hassle.
Since the solution to the spacing problem required a set of interconnected Blink and Skia fixes, Chromium engineers could not "just reverse" to fix the problem. Chromium engineers also tried using a different build mark to change a font-related code path in Skia, which fixed the issue of bold fonts, but regressed the spacing issue.
The solution
In the end, of course, Chromium wanted to fix both. Chromium now makes use of HarfBuzz's built-in font OpenType font metrics functions to retrieve horizontal metrics directly from binary data in system font tables. With this, Chromium is bypassing CoreText and Skia when the source has a trak table (except when it is the emoji font).
Meanwhile, there is still Skia number # 10123 to track fix of this entirely in Skia, and re-use Skia to retrieve system source metrics from there, instead of the current fix that happens HarfBuzz.
