More variable font options for macOS system UI font in Chromium 83

the section 'system-ui' de la especificación de nivel 4 del módulo de fuentes CSSConcepto de CSS¿Qué es el CSS?CSS es un lenguaje de programación que se usa para definir el estilo y el aspecto de un documento que se ha escrito mediante de un lenguaje de etiquetas, como HTML. Conocido además como hojas de estilo en cascada, es el que se emplea para dar colores, indicar tipos de letra o inclusive resaltar aspectos como el espacio entre items para dotar de estilo a plus define un system-ui keywordPor definición, una palabra clave, (keyword en inglés), es una palabra informativa utilizada en un sistema de recuperación de información para indicar el contenido de un documento con la expectativa de un resultado de búsqueda coincidente. Herramientas de palabras clave La búsqueda de palabras clave para proyectos web individuales se ve enormemente facilitada por útiles herramientas. Al mismo tiempo, las herramientas de palabras clave ayudan mucho en la optimización del plus 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.

This post assumes that you are already familiar with variable fonts. If not, check out Intro to Variable Fonts on the Web and the video below.

Compatibilidad del browserUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los plus

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:

h1Concepto de H1¿Qué es un H1?El H1 es un elemento primordial en cualquier página web y algo que nace del lenguaje HTML. Consiste en una etiqueta que suele utilizarse para indicar el fragmento más importante de una página, normalmente la cabecera que más ha de señalar en ella y captar la atención del lector.Su conocimiento y su utilización son algo primordial de cara al SEO e inclusive de cara a plus {
font-family: system-ui;
font-weight: 700;
font-variation-settings: 
'wght' 750
;
}

h1 {
  font-family: system-ui;
  font-weight: 700;
  font-variation-settings: 
    'wght' 750, 
    'opsz' 20,
    'GRAD' 400, 
    'YAXS' 400
  ;
}

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 headersConcepto de Encabezados¿Qué son los Encabezados?Los Encabezados, además conocidos como headers en inglés, son una parte fundamental del diseño de cualquier web, dado que consiste en la parte principal que se ve de esta al acceder, la parte de arriba de cualquier página. El lugar más visible y al que todos los usuarios que visitan un lugar de Internet acceden cuando entran en él, pudiendo tener así una imagen rápida plus 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

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 APIConcepto de API¿Qué es una API?Una API, siglas de Application Programming Interface o Interfaz de Programación de Apps, es un recopilatorio de código que se puede emplear para que varias apps se comuniquen entre ellas. Es algo que realiza una tarea equivalente a la interfaz de usuario al momento de promover la interacción entre persona y programa, solo que aplicado única y exclusivamente dentro del entorno del software.Aún cuando suene plus 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 (emojiUn Emoji es un pictograma, que se usa principalmente en el chat o en la comunicación por SMS. Los emoji no son como los emoticonos que se limitan a expresar emociones, sino que además incluyen conceptos de otros temas, como "plantas" o "animales" en forma de imagen. Historia y antecedentes Los emoji se originaron en Japón, donde estos símbolos se desarrollaron a finales de la década de 1990 para un plus 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 attributeAtributo es una definición que se usa en varios campos de IT. Generalmente, un atributo se usa para describir un fichero o un campo de datos con más detalle. En la programación orientada a objetos, los atributos son una propiedad o característica que se puede asignar a un objeto (elemento). A través el uso de atributos se pueden asignar valores específicos a ciertos items. Áreas de aplicación Las tres áreas plus 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 'magic' in the fountain. One of these seems to be that it still modifies the glyph previews in some way other than just the 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.