{"id":93352,"date":"2022-09-05T06:29:07","date_gmt":"2022-09-05T04:29:07","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/mas-opciones-de-fuente-variable-para-la-fuente-de-la-interfaz-de-usuario-del-sistema-macos-en-chromium-83\/"},"modified":"2020-10-28T06:35:52","modified_gmt":"2020-10-28T09:35:52","slug":"mas-opciones-de-fuente-variable-para-la-fuente-de-la-interfaz-de-usuario-del-sistema-macos-en-chromium-83","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/fr\/dev\/mas-opciones-de-fuente-variable-para-la-fuente-de-la-interfaz-de-usuario-del-sistema-macos-en-chromium-83\/","title":{"rendered":"Plus d&#039;options de police variables pour la police de l&#039;interface utilisateur du syst\u00e8me macOS dans Chromium 83"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table des mati\u00e8res<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Basculer la table des mati\u00e8res\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Basculer<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/mas-opciones-de-fuente-variable-para-la-fuente-de-la-interfaz-de-usuario-del-sistema-macos-en-chromium-83\/#Compatibilidad-del-navegador\" >Compatibilit\u00e9 du navigateur<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/mas-opciones-de-fuente-variable-para-la-fuente-de-la-interfaz-de-usuario-del-sistema-macos-en-chromium-83\/#Nuevos-poderes\" >De nouveaux pouvoirs<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/mas-opciones-de-fuente-variable-para-la-fuente-de-la-interfaz-de-usuario-del-sistema-macos-en-chromium-83\/#wght\" >wght<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/mas-opciones-de-fuente-variable-para-la-fuente-de-la-interfaz-de-usuario-del-sistema-macos-en-chromium-83\/#opsz\" >opsz<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/mas-opciones-de-fuente-variable-para-la-fuente-de-la-interfaz-de-usuario-del-sistema-macos-en-chromium-83\/#GRAD\" >GRAD<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/mas-opciones-de-fuente-variable-para-la-fuente-de-la-interfaz-de-usuario-del-sistema-macos-en-chromium-83\/#YAXS\" >YAXS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/mas-opciones-de-fuente-variable-para-la-fuente-de-la-interfaz-de-usuario-del-sistema-macos-en-chromium-83\/#Combinando-las-opciones\" >Combiner les options<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/mas-opciones-de-fuente-variable-para-la-fuente-de-la-interfaz-de-usuario-del-sistema-macos-en-chromium-83\/#Patio-de-recreo\" >Cour de r\u00e9cr\u00e9ation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/mas-opciones-de-fuente-variable-para-la-fuente-de-la-interfaz-de-usuario-del-sistema-macos-en-chromium-83\/#Apendice-El-system-ui-regresion\" >Annexe: La r\u00e9gression system-ui<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/mas-opciones-de-fuente-variable-para-la-fuente-de-la-interfaz-de-usuario-del-sistema-macos-en-chromium-83\/#Antecedentes\" >Ant\u00e9c\u00e9dents<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/mas-opciones-de-fuente-variable-para-la-fuente-de-la-interfaz-de-usuario-del-sistema-macos-en-chromium-83\/#Aun-no-hecho\" >Pas encore fini<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/mas-opciones-de-fuente-variable-para-la-fuente-de-la-interfaz-de-usuario-del-sistema-macos-en-chromium-83\/#La-solucion\" >La solution<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Catalina apporte une nouvelle source de variables syst\u00e8me attach\u00e9e \u00e0 macOS.\n        <\/p>\n<p>\n          <time>21 mai 2020<\/time><br \/>\n            Mise \u00e0 jour <time>26 mai 2020<\/time>\n        <\/p>\n<\/header>\n<p>Les <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/drafts.csswg.org\/css-fonts-4\/#system-ui-def\">section &#039;system-ui&#039;<\/a> de la sp\u00e9cification de niveau 4 du module polices CSS d\u00e9finit un <code>syst\u00e8me-ui<\/code> font mot cl\u00e9 qui permet aux d\u00e9veloppeurs d&#039;utiliser la police de syst\u00e8me d&#039;exploitation par d\u00e9faut int\u00e9gr\u00e9e de haute qualit\u00e9, localis\u00e9e, optimis\u00e9e pour turbo, sans t\u00e9l\u00e9chargement, directement sur leurs sites et applications.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">corps<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">famille de polices<\/span><span class=\"token punctuation\">:<\/span> syst\u00e8me-ui<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Ce choix de police est similaire \u00e0 \u00abutiliser la police syst\u00e8me par d\u00e9faut pour les param\u00e8tres r\u00e9gionaux actuels de cet utilisateur\u00bb.<\/p>\n<p>Sur macOS, le <code>syst\u00e8me-ui<\/code> La police est San Francisco, une police qu&#039;une \u00e9quipe de conception a r\u00e9cemment examin\u00e9e, test\u00e9e et\u2026 mise \u00e0 jour! Nous aborderons d&#039;abord les nouvelles fonctionnalit\u00e9s passionnantes de polices variables de Catalina, puis nous aborderons quelques bogues et la fa\u00e7on dont les ing\u00e9nieurs de Chromium les ont r\u00e9solus.<\/p>\n<p>Cet article suppose que vous \u00eates d\u00e9j\u00e0 familiaris\u00e9 avec les polices variables. Sinon, consultez Introduction aux polices variables sur le Web et la vid\u00e9o ci-dessous.<\/p>\n<p>\n  <iframe loading=\"lazy\" title=\"Polices variables - Suraliment\u00e9es\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/B42rUMdcB7c?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/p>\n<h3 id=\"browser-compatibility\"><span class=\"ez-toc-section\" id=\"Compatibilidad-del-navegador\"><\/span>Compatibilit\u00e9 du navigateur <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Au moment de la r\u00e9daction de cet article, <code>syst\u00e8me-ui<\/code> prend en charge Chromium (\u00e0 partir de 56), Edge (\u00e0 partir de 79), Safari (\u00e0 partir de 11) et Firefox (\u00e0 partir de 43) mais avec le <code>-apple-system<\/code> Mot-cl\u00e9. Regarder <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/caniuse.com\/#feat=variable-fonts\">Puis-je utiliser des polices variables?<\/a> pour les mises \u00e0 jour.<\/p>\n<h2 id=\"new-powers\"><span class=\"ez-toc-section\" id=\"Nuevos-poderes\"><\/span>De nouveaux pouvoirs <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Les nouvelles comp\u00e9tences apport\u00e9es par Catalina \u00e0 la source syst\u00e8me sont d\u00e9sormais disponibles pour les d\u00e9veloppeurs Web \u00e0 partir de Chromium 83. <code>syst\u00e8me-ui<\/code> source maintenant <strong>a des param\u00e8tres plus variables<\/strong>- Taille optique et 2 r\u00e9glages de poids uniques:<\/p>\n<figure class=\"w-compare\">\n<p class=\"w-compare__label w-compare__label--worse\">\n<p>    Mojave\n  <\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">h1<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">famille de polices<\/span><span class=\"token punctuation\">:<\/span> syst\u00e8me-ui<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">font-weight<\/span><span class=\"token punctuation\">:<\/span> 700<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">param\u00e8tres de variation de police<\/span><span class=\"token punctuation\">:<\/span> <br><span class=\"token string\">'wght'<\/span> 750<br><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><\/code><\/pre>\n<p><\/web-copy-code><\/figure>\n<figure class=\"w-compare\">\n<p class=\"w-compare__label w-compare__label--better\">\n<p>    Katherine\n  <\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"highlight-line\"><span class=\"token selector\">h1<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token property\">famille de polices<\/span><span class=\"token punctuation\">:<\/span> syst\u00e8me-ui<span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token property\">font-weight<\/span><span class=\"token punctuation\">:<\/span> 700<span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token property\">param\u00e8tres de variation de police<\/span><span class=\"token punctuation\">:<\/span> <\/span><br><span class=\"highlight-line\">    <span class=\"token string\">'wght'<\/span> 750<span class=\"token punctuation\">,<\/span> <\/span><br><mark class=\"highlight-line highlight-line-active\">    <span class=\"token string\">'opsz'<\/span> 20<span class=\"token punctuation\">,<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">    <span class=\"token string\">'GRAD'<\/span> 400<span class=\"token punctuation\">,<\/span> <\/mark><br><mark class=\"highlight-line highlight-line-active\">    <span class=\"token string\">'YAXS'<\/span> 400<\/mark><br><span class=\"highlight-line\">  <span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\"><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/figure>\n<div class=\"w-aside w-aside--gotchas\">\n<strong>Gotchas!<\/strong> <\/p>\n<p>Ces variantes de fonctionnalit\u00e9s ne sont disponibles que pour les utilisateurs de macOS Catalina.<\/p>\n<\/div>\n<p>\u00c0 Mojave, <code>syst\u00e8me-ui<\/code> est une police variable avec juste <code>wght<\/code> Les param\u00e8tres. Alors que <code>syst\u00e8me-ui<\/code> en Catalina c&#039;est une police variable avec <code>wght<\/code>, <code>opsz<\/code>, <code>GRAD<\/code>y <code>YAXS<\/code> Les param\u00e8tres.<\/p>\n<p>Cela me semble \u00eatre de bonnes opportunit\u00e9s de conception d&#039;am\u00e9lioration progressive! Plongez vraiment dans les subtilit\u00e9s de la police syst\u00e8me si vous le souhaitez.<\/p>\n<h3 id=\"wght\"><span class=\"ez-toc-section\" id=\"wght\"><\/span><code>wght<\/code>  <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Accepte une \u00e9paisseur de police comprise entre <code>0<\/code> y <code>900<\/code> et s&#039;applique \u00e9galement \u00e0 tous les personnages.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><br><span class=\"token property\">param\u00e8tres de variation de police<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">'wght'<\/span> 750<span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<figure class=\"w-figure\">\n  <video playsinline=\"\" controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/macos-system-ui\/system-ui_wght.webm\" type=\"video\/webm\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/macos-system-ui\/system-ui_wght.mp4\"><\/source><\/source><\/video><br \/>\n<\/figure>\n<h3 id=\"opsz\"><span class=\"ez-toc-section\" id=\"opsz\"><\/span><code>opsz<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Le dimensionnement optique est similaire au cr\u00e9nage ou \u00e0 l&#039;espacement des lettres, mais l&#039;espacement est effectu\u00e9 par un \u0153il humain plut\u00f4t que par les math\u00e9matiques. Une valeur de <code>19<\/code> ou inf\u00e9rieur est destin\u00e9 \u00e0 l&#039;espacement du texte et du corps, tandis que <code>20<\/code> ou plus est d&#039;espacer les titres et les en-t\u00eates sur l&#039;\u00e9cran.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><br><span class=\"token property\">param\u00e8tres de variation de police<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">'opsz'<\/span> 20<span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<figure class=\"w-figure\">\n  <video playsinline=\"\" controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/macos-system-ui\/system-ui_opsz_v2.webm\" type=\"video\/webm\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/macos-system-ui\/system-ui_opsz_v2.mp4\"><\/source><\/source><\/video><br \/>\n<\/figure>\n<h3 id=\"grad\"><span class=\"ez-toc-section\" id=\"GRAD\"><\/span><code>GRAD<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Similaire au poids, mais sans toucher \u00e0 l&#039;espace horizontal. Accepte les valeurs entre <code>400<\/code> y <code>1000<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><br><span class=\"token property\">param\u00e8tres de variation de police<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">'GRAD'<\/span> 500<span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<figure class=\"w-figure\">\n  <video playsinline=\"\" controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/macos-system-ui\/system-ui_grad_v2.webm\" type=\"video\/webm\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/macos-system-ui\/system-ui_grad_v2.mp4\"><\/source><\/source><\/video><br \/>\n<\/figure>\n<h3 id=\"yaxs\"><span class=\"ez-toc-section\" id=\"YAXS\"><\/span><code>YAXS<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u00c9tirez le glyphe verticalement. Accepte les valeurs entre <code>400<\/code> y <code>1000<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><br><span class=\"token property\">param\u00e8tres de variation de police<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">'YAXS'<\/span> 500<span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<figure class=\"w-figure\">\n  <video playsinline=\"\" controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/macos-system-ui\/system-ui_yaxs_v2.webm\" type=\"video\/webm\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/macos-system-ui\/system-ui_yaxs_v2.mp4\"><\/source><\/source><\/video><br \/>\n<\/figure>\n<h3 id=\"combining-the-options\"><span class=\"ez-toc-section\" id=\"Combinando-las-opciones\"><\/span>Combiner les options <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Avec quelques lignes de CSS, nous pouvons ajuster les param\u00e8tres de police gras de notre choix ou essayer d&#039;autres combinaisons int\u00e9ressantes:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token property\">font-weight<\/span><span class=\"token punctuation\">:<\/span> 700<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">font-weight<\/span><span class=\"token punctuation\">:<\/span> bold<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">param\u00e8tres de variation de police<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">'wght'<\/span> 750<span class=\"token punctuation\">,<\/span> <span class=\"token string\">'YAXS'<\/span> 600<span class=\"token punctuation\">,<\/span> <span class=\"token string\">'GRAD'<\/span> 500<span class=\"token punctuation\">,<\/span> <span class=\"token string\">'opsz'<\/span> 20<span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<figure class=\"w-figure\">\n  <video playsinline=\"\" controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/macos-system-ui\/system-ui_combined_v2.webm\" type=\"video\/webm\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/macos-system-ui\/system-ui_combined_v2.mp4\"><\/source><\/source><\/video><br \/>\n<\/figure>\n<p>Et donc, les utilisateurs de Chromium sur macOS voient leur poids personnalis\u00e9 de 750 mis \u00e0 jour avec d&#039;autres ajustements amusants \ud83d\udc4d<\/p>\n<h2 id=\"playground\"><span class=\"ez-toc-section\" id=\"Patio-de-recreo\"><\/span>Cour de r\u00e9cr\u00e9ation <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Cliquer <strong>Remix \u00e0 \u00e9diter<\/strong> dans le Glitch ci-dessous pour obtenir une copie modifiable du Glitch, puis \u00e9ditez le nouveau <code>param\u00e8tres de variation de police<\/code> options pour voir comment cela affecte votre police. N&#039;oubliez pas que ce Glitch ne fonctionnera que si vous utilisez un appareil macOS Catalina.<\/p>\n<p>\n  <iframe allow=\"camera; clipboard; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi; vr\" loading=\"lazy\" src=\"https:\/\/glitch.com\/embed\/#!\/embed\/macos-system-ui?attributionHidden=true&amp;sidebarCollapsed=true&amp;path=style.css&amp;previewSize=50\" style=\"height: 100%; width: 100%; border: 0;\" title=\"macos-system-ui sur Glitch\"><\/iframe>\n<\/p>\n<p>macOS 10.15 a ajout\u00e9 de nouvelles fonctionnalit\u00e9s \u00e0 votre source syst\u00e8me et dans macOS 10.15 un hack <code>syst\u00e8me-ui<\/code> Le bogue a \u00e9t\u00e9 enregistr\u00e9 dans le suivi des bogues de Chromium. Je me demande s&#039;ils sont li\u00e9s!?<\/p>\n<div role=\"banner\" class=\"w-banner w-banner--neutral w-banner--body\">\n<p>  L&#039;image de cet article a \u00e9t\u00e9 r\u00e9alis\u00e9e avec CSS et <code>syst\u00e8me-ui<\/code>. Voici la <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/argyleink\/pen\/eYpbwWd\">codepen<\/a>.\n<\/div>\n<h2 id=\"regression\"><span class=\"ez-toc-section\" id=\"Apendice-El-system-ui-regresion\"><\/span>Annexe: Le <code>syst\u00e8me-ui<\/code> r\u00e9gression <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"w-aside w-aside--note\">\n<p>Le reste de cet article de blog explique comment <code>syst\u00e8me-ui<\/code> cass\u00e9 Chromium 80 et comment les ing\u00e9nieurs de Chromium l&#039;ont r\u00e9par\u00e9. Si ce n&#039;est pas int\u00e9ressant ou pertinent pour vous, vous pouvez arr\u00eater de lire maintenant.<\/p>\n<\/div>\n<p>Cette histoire commence par une erreur diff\u00e9rente: <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/crbug.com\/1005969\"># 1005969<\/a>. Cela a \u00e9t\u00e9 signal\u00e9 dans macOS 10.15 car le <code>syst\u00e8me-ui<\/code> l&#039;espacement des polices semblait serr\u00e9 et encombr\u00e9.<\/p>\n<figure class=\"w-figure\">\n  <img alt='espacement-chrome-serr\u00e9-1950379' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/tight-chrome-spacing-1950379.jpg'><figcaption class=\"w-figcaption\">Chrome \u00e0 gauche (suivi plus serr\u00e9), Safari \u00e0 droite (meilleur espacement optique)<\/figcaption><\/figure>\n<h3 id=\"background\"><span class=\"ez-toc-section\" id=\"Antecedentes\"><\/span>Ant\u00e9c\u00e9dents <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Avez-vous d\u00e9j\u00e0 remarqu\u00e9 dans macOS 10.14 comment vos paragraphes ou vos en-t\u00eates &quot;s&#039;alignent&quot; sur une police d&#039;apparence diff\u00e9rente lorsque la taille augmente ou diminue?<\/p>\n<figure class=\"w-figure\">\n  <video playsinline=\"\" controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/macos-system-ui\/system-ui_20to19.webm\" type=\"video\/webm\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/macos-system-ui\/system-ui_20to19.mp4\"><\/source><\/source><\/video><br \/>\n<\/figure>\n<p>Dans Mojave (macOS 10.14), le <code>syst\u00e8me-ui<\/code> font bascule entre deux polices en fonction de la taille de police cible. Quand le texte \u00e9tait en dessous <code>20px<\/code>, macOS utilisait &quot;San Francisco Text&quot;. Quand le texte \u00e9tait <code>20px<\/code> ou plus, macOS utilisait &quot;San Francisco Display&quot;. La taille optique a \u00e9t\u00e9 construite statiquement sur deux sources distinctes.<\/p>\n<p>Catalina (macOS 10.15) a livr\u00e9 une nouvelle source de variables jointes pour San Francisco. Fini la gestion des \u00abtextes\u00bb et des \u00ab\u00e9crans\u00bb. A \u00e9galement remport\u00e9 le nouveau param\u00e8tre de variation <code>opsz<\/code> d\u00e9crite pr\u00e9c\u00e9demment.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">h1<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">param\u00e8tres de variation de police<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">'opsz'<\/span> 20<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Malheureusement, la valeur par d\u00e9faut <code>opsz<\/code> La valeur de la nouvelle police Catalina est <code>20<\/code>et les ing\u00e9nieurs de Chromium n&#039;\u00e9taient pas pr\u00eats \u00e0 postuler <code>opsz<\/code> \u00e0 la source syst\u00e8me. Cela a conduit les plus petites tailles \u00e0 \u00eatre trop \u00e9troites.<\/p>\n<p>Pour r\u00e9soudre ce probl\u00e8me, Chromium devait appliquer <code>opsz<\/code> correctement \u00e0 la source syst\u00e8me. Cela a men\u00e9 \u00e0 <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/crbug.com\/1005969\">\u00c9dition 1005969<\/a> r\u00e9parer. La victoire! Ou \u00e9tait-ce ...?<\/p>\n<h3 id=\"not-done-yet\"><span class=\"ez-toc-section\" id=\"Aun-no-hecho\"><\/span>Pas encore fini <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Voici o\u00f9 \u00e7a s&#039;est compliqu\u00e9: Chrome appliqu\u00e9 <code>opsz<\/code> mais quelque chose n&#039;allait toujours pas. Les polices syst\u00e8me sur Mac ont une table de polices suppl\u00e9mentaire appel\u00e9e <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.apple.com\/fonts\/TrueType-Reference-Manual\/RM06\/Chap6trak.html\"><code>trak<\/code><\/a>, qui modifie l&#039;espacement horizontal. En travaillant sur la solution, les ing\u00e9nieurs de Chromium ont remarqu\u00e9 que sur macOS, lors de la r\u00e9cup\u00e9ration de m\u00e9triques horizontales \u00e0 partir d&#039;un <code>CTFontRef<\/code> objet, le <code>trak<\/code> les m\u00e9triques \u00e9taient d\u00e9j\u00e0 prises en compte dans les r\u00e9sultats des m\u00e9triques. Biblioth\u00e8que de mod\u00e9lisation de chrome <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/harfbuzz\/harfbuzz\"><code>HarfBuzz<\/code><\/a>  vous avez besoin de m\u00e9triques o\u00f9 le <code>trak<\/code> les valeurs ne sont pas encore prises en compte.<\/p>\n<figure class=\"w-figure\">\n  <img alt='perte de poids-7860704' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/weight-loss-7860704.jpg'><figcaption class=\"w-figcaption\">Gauche: gras appliqu\u00e9 aux tailles de police 19 et plus petites. \u00c0 droite: les tailles de police 20 et sup\u00e9rieures perdent leur style accrocheur<\/figcaption><\/figure>\n<p>Int\u00e9rieurement, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/skia.org\/\">Skia<\/a> (la biblioth\u00e8que graphique, pas la police du m\u00eame nom) utilise \u00e0 la fois le <code>CGFontRef<\/code> cours de <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.apple.com\/documentation\/coregraphics\"><code>CoreGraphics<\/code><\/a>  et le <code>CTFontRef<\/code> cours de <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.apple.com\/documentation\/coretext\"><code>CoreText<\/code><\/a>. En raison des conversions internes requises entre ces objets (utilis\u00e9es pour maintenir la compatibilit\u00e9 descendante et acc\u00e9der aux API requises dans les deux classes), Skia perdrait des informations de poids dans certaines circonstances et les polices en gras cesseraient de fonctionner. Cela a \u00e9t\u00e9 suivi dans <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/crbug.com\/1057654\">\u00c9dition 1057654<\/a>.<\/p>\n<p>Skia doit toujours prendre en charge macOS 10.11 car Chromium le prend toujours en charge. \u00c0 10.11, les polices &quot;San Francisco Text&quot; et &quot;San Francisco Display&quot; n&#039;\u00e9taient m\u00eame pas des polices variables. Au contraire, chacun \u00e9tait une famille de polices distincte pour chaque poids disponible. \u00c0 un moment donn\u00e9, leurs identifiants de glyphes n&#039;\u00e9taient pas synchronis\u00e9s les uns avec les autres. Donc, si Skia fa\u00e7onnait le texte (convertissant le texte en glyphes qui peuvent \u00eatre dessin\u00e9s) avec &quot;San Francisco Text&quot;, ce serait du charabia s&#039;il \u00e9tait dessin\u00e9 avec &quot;San Francisco Screen&quot; et vice versa. Et m\u00eame si Skia ne demandait qu&#039;une taille diff\u00e9rente, macOS pourrait passer \u00e0 l&#039;autre. Il devrait \u00eatre possible de toujours utiliser l&#039;une des polices et de simplement la mettre \u00e0 l&#039;\u00e9chelle (en utilisant un tableau pour la mettre \u00e0 l&#039;\u00e9chelle au lieu de demander une taille plus grande) mais <code>CoreText<\/code> a un probl\u00e8me o\u00f9 il ne met pas \u00e0 l&#039;\u00e9chelle les glyphes sbix (emoji color\u00e9s) vers le haut (vers le bas uniquement). C&#039;est un peu plus complexe que cela. <code>CoreText<\/code> en fait, il semble limiter l&#039;\u00e9tendue verticale apr\u00e8s l&#039;application de la matrice, ce qui semble \u00eatre li\u00e9 au fait de ne pas pouvoir dessiner des emoji \u00e0 des angles de 45 degr\u00e9s. Dans tous les cas, si vous voulez que votre emoji s&#039;affiche en grand, vous devez faire une copie de la police pour obtenir une version plus grande.<\/p>\n<p>Donc, pour cr\u00e9er des copies de <code>CTFont<\/code> objets de diff\u00e9rentes tailles en interne tout en s&#039;assurant que les m\u00eames donn\u00e9es de police sous-jacentes sont utilis\u00e9es, Chromium a tir\u00e9 le <code>CGFont<\/code> hors de <code>CTFont<\/code>, puis a fait un nouveau <code>CTFont<\/code> depuis le <code>CGFont<\/code> (<code>CGFont<\/code> Les objets sont ind\u00e9pendants de la taille, le changement magique se produit dans le <code>CoreText<\/code> niveau). Cela a bien fonctionn\u00e9 jusqu&#039;\u00e0 10154. \u00c0 10 h 15, cet aller-retour a fini par perdre trop d&#039;informations, ce qui a entra\u00een\u00e9 un probl\u00e8me de poids. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/flutter\/flutter\/issues\/49492\">Flutter a remarqu\u00e9 le probl\u00e8me de poids<\/a> et a fait une solution de contournement pour redimensionner pour cr\u00e9er le nouveau <code>CTFont<\/code> directement de l&#039;original <code>CTFont<\/code> tout en contr\u00f4lant la taille optique directement en utilisant un attribut ancien mais non document\u00e9 dans <code>CoreText<\/code>. Cela maintient les choses en marche sur 10.11 et corrige d&#039;autres probl\u00e8mes (comme la d\u00e9finition explicite de la taille optique par d\u00e9faut).<\/p>\n<p>Cependant, cela pr\u00e9serve plus de <code>CoreText<\/code> \u00abmagie\u00bb dans la fontaine. L&#039;une d&#039;elles semble \u00eatre qu&#039;elle modifie toujours les aper\u00e7us des glyphes d&#039;une mani\u00e8re autre que <code>trak<\/code> table (dont l&#039;application Chromium essayait d\u00e9j\u00e0 de supprimer via un autre attribut non document\u00e9).<\/p>\n<p><code>CGFont<\/code>  ne fait rien de cette \u00abmagie\u00bb, alors peut-\u00eatre que Chromium pourrait obtenir le <code>CGFont<\/code> hors de <code>CTFont<\/code> et ne l&#039;utiliser que pour obtenir des avances? Malheureusement, cela ne fonctionnerait pas car <code>CoreText<\/code> il est \u00e9galement connu pour se g\u00e2ter avec les polices d&#039;autres mani\u00e8res. Par exemple, faites un petit emoji l\u00e9g\u00e8rement plus grand que ce que vous avez r\u00e9ellement demand\u00e9 (augmentez un peu leur taille). <code>CGFont<\/code> vous ne savez pas \u00e0 ce sujet, vous vous retrouveriez donc avec vos emoji bas\u00e9s sur sbix trop proches les uns des autres, car vous mesureriez en une seule taille mais <code>CoreText<\/code> cela les rendrait plus gros d&#039;un certain montant. Chrome veut le <code>CTFont<\/code> Vous passez \u00e0 autre chose, mais vous voulez qu&#039;ils ne soient pas suivis, et de pr\u00e9f\u00e9rence sans autre tracas.<\/p>\n<p>\u00c9tant donn\u00e9 que la solution au probl\u00e8me d&#039;espacement n\u00e9cessitait un ensemble de correctifs Blink et Skia interconnect\u00e9s, les ing\u00e9nieurs de Chromium ne pouvaient pas &quot;simplement inverser&quot; pour r\u00e9soudre le probl\u00e8me. Les ing\u00e9nieurs de Chromium ont \u00e9galement essay\u00e9 d&#039;utiliser une marque de construction diff\u00e9rente pour modifier un chemin de code li\u00e9 aux polices dans Skia, ce qui a r\u00e9solu le probl\u00e8me des polices en gras, mais a r\u00e9gress\u00e9 le probl\u00e8me d&#039;espacement.<\/p>\n<h2 id=\"the-fix\"><span class=\"ez-toc-section\" id=\"La-solucion\"><\/span>La solution <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>En fin de compte, bien s\u00fbr, Chromium voulait r\u00e9soudre les deux. Chromium utilise d\u00e9sormais les fonctions de m\u00e9triques de polices OpenType int\u00e9gr\u00e9es de HarfBuzz pour r\u00e9cup\u00e9rer les m\u00e9triques horizontales directement \u00e0 partir des donn\u00e9es binaires dans les tables de polices syst\u00e8me. Avec cela, Chromium contourne <code>CoreText<\/code> et Skia lorsque la source a un <code>trak<\/code> table (sauf lorsqu&#039;il s&#039;agit de la police emoji).<\/p>\n<figure class=\"w-figure\">\n  <img alt='poids-dos-8071523' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/weight-back-8071523.jpg'><br \/>\n<\/figure>\n<p>Pendant ce temps, il y a encore <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/bugs.chromium.org\/p\/skia\/issues\/detail?id=10123\">Num\u00e9ro Skia # 10123<\/a> pour suivre la correction de cela enti\u00e8rement dans Skia, et r\u00e9utiliser Skia pour r\u00e9cup\u00e9rer les m\u00e9triques de la source syst\u00e8me \u00e0 partir de l\u00e0, au lieu du correctif actuel qui se produit <code>HarfBuzz<\/code>.<\/p>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>Catalina apporte une nouvelle police syst\u00e8me variable int\u00e9gr\u00e9e \u00e0 macOS. 21 mai 2020 Mise \u00e0 jour le 26 mai 2020 de la section &#039;system-ui&#039; du\u2026<\/p>","protected":false},"author":1,"featured_media":93354,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-93352","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>M\u00e1s opciones de fuente variable para la fuente de la interfaz de usuario del sistema macOS en Chromium 83 - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Catalina trae una nueva fuente de sistema de variable unida a macOS. 21 de mayo de 2020 Actualizado 26 de mayo de 2020 los secci\u00f3n &#039;system-ui&#039; de la\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/plus-doptions-de-police-variables-pour-linterface-utilisateur-du-systeme-font-macos-en-chrome-83\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"M\u00e1s opciones de fuente variable para la fuente de la interfaz de usuario del sistema macOS en Chromium 83\" \/>\n<meta property=\"og:description\" content=\"Catalina trae una nueva fuente de sistema de variable unida a macOS. 21 de mayo de 2020 Actualizado 26 de mayo de 2020 los secci\u00f3n &#039;system-ui&#039; de la\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/fr\/dev\/plus-doptions-de-police-variables-pour-linterface-utilisateur-du-systeme-font-macos-en-chrome-83\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-05T04:29:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/thumb-3778939.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"376\" \/>\n\t<meta property=\"og:image:height\" content=\"240\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/plus-doptions-de-police-variables-pour-linterface-utilisateur-du-systeme-font-macos-en-chrome-83\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/plus-doptions-de-police-variables-pour-linterface-utilisateur-du-systeme-font-macos-en-chrome-83\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"M\u00e1s opciones de fuente variable para la fuente de la interfaz de usuario del sistema macOS en Chromium 83\",\"datePublished\":\"2022-09-05T04:29:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/plus-doptions-de-police-variables-pour-linterface-utilisateur-du-systeme-font-macos-en-chrome-83\\\/\"},\"wordCount\":1754,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/plus-doptions-de-police-variables-pour-linterface-utilisateur-du-systeme-font-macos-en-chrome-83\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/thumb-3778939.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/plus-doptions-de-police-variables-pour-linterface-utilisateur-du-systeme-font-macos-en-chrome-83\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/plus-doptions-de-police-variables-pour-linterface-utilisateur-du-systeme-font-macos-en-chrome-83\\\/\",\"name\":\"M\u00e1s opciones de fuente variable para la fuente de la interfaz de usuario del sistema macOS en Chromium 83 - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/plus-doptions-de-police-variables-pour-linterface-utilisateur-du-systeme-font-macos-en-chrome-83\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/plus-doptions-de-police-variables-pour-linterface-utilisateur-du-systeme-font-macos-en-chrome-83\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/thumb-3778939.jpg\",\"datePublished\":\"2022-09-05T04:29:07+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Catalina trae una nueva fuente de sistema de variable unida a macOS. 21 de mayo de 2020 Actualizado 26 de mayo de 2020 los secci\u00f3n 'system-ui' de la\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/plus-doptions-de-police-variables-pour-linterface-utilisateur-du-systeme-font-macos-en-chrome-83\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/plus-doptions-de-police-variables-pour-linterface-utilisateur-du-systeme-font-macos-en-chrome-83\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/thumb-3778939.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/thumb-3778939.jpg\",\"width\":376,\"height\":240,\"caption\":\"thumb-3778939-9772115-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Plus d&#039;options de police variables pour la police de l&#039;interface utilisateur du syst\u00e8me macOS dans Chromium 83 - R Marketing Digital","description":"Catalina trae una nueva fuente de sistema de variable unida a macOS. 21 de mayo de 2020 Actualizado 26 de mayo de 2020 los secci\u00f3n 'system-ui' de la","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/fr\/dev\/plus-doptions-de-police-variables-pour-linterface-utilisateur-du-systeme-font-macos-en-chrome-83\/","og_locale":"fr_FR","og_type":"article","og_title":"M\u00e1s opciones de fuente variable para la fuente de la interfaz de usuario del sistema macOS en Chromium 83","og_description":"Catalina trae una nueva fuente de sistema de variable unida a macOS. 21 de mayo de 2020 Actualizado 26 de mayo de 2020 los secci\u00f3n 'system-ui' de la","og_url":"https:\/\/rmarketingdigital.com\/fr\/dev\/plus-doptions-de-police-variables-pour-linterface-utilisateur-du-systeme-font-macos-en-chrome-83\/","og_site_name":"R Marketing Digital","article_published_time":"2022-09-05T04:29:07+00:00","og_image":[{"width":376,"height":240,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/thumb-3778939.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/plus-doptions-de-police-variables-pour-linterface-utilisateur-du-systeme-font-macos-en-chrome-83\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/plus-doptions-de-police-variables-pour-linterface-utilisateur-du-systeme-font-macos-en-chrome-83\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"M\u00e1s opciones de fuente variable para la fuente de la interfaz de usuario del sistema macOS en Chromium 83","datePublished":"2022-09-05T04:29:07+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/plus-doptions-de-police-variables-pour-linterface-utilisateur-du-systeme-font-macos-en-chrome-83\/"},"wordCount":1754,"image":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/plus-doptions-de-police-variables-pour-linterface-utilisateur-du-systeme-font-macos-en-chrome-83\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/thumb-3778939.jpg","articleSection":["Dev"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/plus-doptions-de-police-variables-pour-linterface-utilisateur-du-systeme-font-macos-en-chrome-83\/","url":"https:\/\/rmarketingdigital.com\/fr\/dev\/plus-doptions-de-police-variables-pour-linterface-utilisateur-du-systeme-font-macos-en-chrome-83\/","name":"Plus d&#039;options de police variables pour la police de l&#039;interface utilisateur du syst\u00e8me macOS dans Chromium 83 - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/plus-doptions-de-police-variables-pour-linterface-utilisateur-du-systeme-font-macos-en-chrome-83\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/plus-doptions-de-police-variables-pour-linterface-utilisateur-du-systeme-font-macos-en-chrome-83\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/thumb-3778939.jpg","datePublished":"2022-09-05T04:29:07+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Catalina trae una nueva fuente de sistema de variable unida a macOS. 21 de mayo de 2020 Actualizado 26 de mayo de 2020 los secci\u00f3n 'system-ui' de la","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/fr\/dev\/plus-doptions-de-police-variables-pour-linterface-utilisateur-du-systeme-font-macos-en-chrome-83\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/plus-doptions-de-police-variables-pour-linterface-utilisateur-du-systeme-font-macos-en-chrome-83\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/thumb-3778939.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/thumb-3778939.jpg","width":376,"height":240,"caption":"thumb-3778939-9772115-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"Marketing num\u00e9rique","description":"Agence de r\u00e9f\u00e9rencement | Publicit\u00e9 sur les r\u00e9seaux sociaux | Gestion de communaut\u00e9","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"Marketing num\u00e9rique","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/93352","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/comments?post=93352"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/93352\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media\/93354"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media?parent=93352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/categories?post=93352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/tags?post=93352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}