deepStateMirrors/tabi
1
0
Fork 1
mirror of https://github.com/welpo/tabi.git synced 2026-02-15 23:57:19 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1
tabi/ca/blog/custom-font-subset/index.html
GitHub Actions 5340fa3b9d Deploy welpo/tabi to welpo/tabi:gh-pages
2026-02-14 22:16:46 +00:00

111 lines
No EOL
36 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html><html lang=ca><head><meta charset=UTF-8><meta content="default-src 'self';font-src 'self' data:;img-src 'self' https://* data:;media-src 'self' https://cdn.jsdelivr.net/;style-src 'self';frame-src player.vimeo.com https://www.youtube-nocookie.com;connect-src 'self' https://tabi-stats.osc.garden vhiweeypifbwacashxjz.supabase.co;script-src 'self' https://tabi-stats.osc.garden cdn.jsdelivr.net 'self'" http-equiv=Content-Security-Policy><meta content="width=device-width,initial-scale=1.0" name=viewport><meta content=https://welpo.github.io/tabi name=base><title>
~/tabi • Optimitza la càrrega amb un subconjunt de font personalitzat</title><link href=https://welpo.github.io/tabi/img/seedling.png rel=icon type=image/png><link href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="50%" x="50%" dominant-baseline="central" text-anchor="middle" font-size="88">🌱</text></svg>' rel=icon><link title="~/tabi - Atom Feed" href=https://welpo.github.io/tabi/atom.xml rel=alternate type=application/atom+xml><link href="https://welpo.github.io/tabi/custom_subset.css?h=0b9535a28bc3d5bf2321" rel=stylesheet><link href="https://welpo.github.io/tabi/main.css?h=045c365e19a4d50a64bb" rel=stylesheet><meta content="light dark" name=color-scheme><meta content=#087e96 name=theme-color><meta content="Aprèn com crear un subconjunt personalitzat que només inclogui els glifs necessaris." name=description><meta content="Aprèn com crear un subconjunt personalitzat que només inclogui els glifs necessaris." property=og:description><meta content="Optimitza la càrrega amb un subconjunt de font personalitzat" property=og:title><meta content=article property=og:type><meta content="https://welpo.github.io/tabi/blog/custom-font-subset/social_cards/ca_blog_custom_font_subset.jpg?h=39d2db07d527ec5ba561" property=og:image><meta content=1400 property=og:image:width><meta content=800 property=og:image:height><meta content="https://welpo.github.io/tabi/blog/custom-font-subset/social_cards/ca_blog_custom_font_subset.jpg?h=39d2db07d527ec5ba561" name=twitter:image><meta content=summary_large_image name=twitter:card><meta content=ca_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/ca/blog/custom-font-subset/ hreflang=ca rel=alternate><meta content=es_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/es/blog/custom-font-subset/ hreflang=es rel=alternate><meta content=en_GB property=og:locale:alternate><link href=https://welpo.github.io/tabi/blog/custom-font-subset/ hreflang=en rel=alternate><meta content=https://welpo.github.io/tabi/ca/blog/custom-font-subset/ property=og:url><meta content=~/tabi property=og:site_name><noscript><link href=https://welpo.github.io/tabi/no_js.css rel=stylesheet></noscript><script src=https://welpo.github.io/tabi/js/initializeTheme.min.js></script><script defer src=https://welpo.github.io/tabi/js/themeSwitcher.min.js></script><script async data-goatcounter=https://tabi-stats.osc.garden/count src=https://tabi-stats.osc.garden/count.js></script><body><a href=#main-content id=skip-link>Saltar al contingut</a><header><nav class=navbar><div class=nav-title><a class=home-title href=https://welpo.github.io/tabi/ca/>~/tabi</a></div><div class=nav-navs><ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/ca/blog/>blog </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/ca/archive/>arxiu </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/ca/tags/>etiquetes </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/ca/projects/>projectes </a><li class=menu-icons-container><ul class=menu-icons-group><li class=language-switcher><details class=dropdown><summary aria-label="Selecció d'idioma" title="Selecció d'idioma" aria-haspopup=true role=button><div class=language-switcher-icon></div></summary> <div class=dropdown-content role=menu>Català<a aria-label=English href=https://welpo.github.io/tabi/blog/custom-font-subset/ lang=en role=menuitem>English</a><a aria-label=Español href=https://welpo.github.io/tabi/es/blog/custom-font-subset/ lang=es role=menuitem>Español</a><a aria-label=العربية href=https://welpo.github.io/tabi/ar/blog/custom-font-subset/ lang=ar role=menuitem>العربية</a></div></details><li class="theme-switcher-wrapper js"><div aria-label="Canvia el mode obscur" title="Canvia el mode obscur/clar" aria-pressed=false class=theme-switcher role=button tabindex=0></div><div aria-label="Restableix el mode al valor predeterminat" class="theme-resetter arrow" title="Restableix el mode al valor predeterminat" aria-hidden=true role=button tabindex=0></div></ul></ul></div></nav></header><div class=content id=main-content><main><article class=h-entry><h1 class="p-name article-title">Optimitza la càrrega amb un subconjunt de font personalitzat</h1><a class="u-url u-uid" href=https://welpo.github.io/tabi/ca/blog/custom-font-subset/></a><ul class=meta><li><time class=dt-published datetime=2023-04-29>29 d’abr. 2023</time><li title="517 paraules"><span aria-hidden=true class=separator>•</span>3 mins de lectura<li class=tag><span aria-hidden=true class=separator>•</span>Etiquetes: <li class=tag><a class=p-category href=https://welpo.github.io/tabi/ca/tags/funcionalitat/>funcionalitat</a>, <li class=tag><a class=p-category href=https://welpo.github.io/tabi/ca/tags/tutorial/>tutorial</a></ul><ul class="meta last-updated"><li><time class=dt-updated datetime=2025-01-12>Actualitzat el 12 de gen. 2025</time><li><span aria-hidden=true class=separator>•</span><a class=external href=https://github.com/welpo/tabi/commits/main/content/blog/custom-font-subset/index.ca.md>Veure canvis</a></ul><p class=p-summary hidden>Aprèn com crear un subconjunt personalitzat que només inclogui els glifs necessaris.<section class="e-content body"><h2 id=el-problema><a aria-label="Anchor link for: el-problema" class="header-anchor no-hover-padding" href=#el-problema><span aria-hidden=true class=link-icon></span></a> El problema</h2><p>Les fonts personalitzades causen parpelleig de text a Firefox. Per veure un gif i més detalls, mira <a class=external href=https://github.com/welpo/tabi/issues/75 rel=external>aquesta issue</a>.<h2 id=la-solucio><a aria-label="Anchor link for: la-solucio" class="header-anchor no-hover-padding" href=#la-solucio><span aria-hidden=true class=link-icon></span></a> La solució</h2><p>Per solucionar això, tabi carrega un subconjunt de glifs per a l’encapçalament. Donat que això augmenta lleugerament el temps de càrrega inicial, és una bona idea intentar minimitzar la mida d’aquest subconjunt.<p>Per defecte, tabi inclou fitxers de subconjunts per a caràcters en anglès i espanyol (amb alguns símbols). Aquests fitxers es carreguen quan la pàgina o el lloc web de Zola està en aquest idioma.<div class="admonition tip"><div class="admonition-icon admonition-icon-tip"></div><div class=admonition-content><strong class=admonition-title>TIP</strong><p>Si estàs fent servir una font personalitzada, pots crear el teu propi subconjunt (segueix llegint) o desactivar completament els subconjunts predeterminats amb <code>enable_subset = false</code> a <code>config.toml</code>.</div></div><p>Per a una optimització addicional, a continuació t’expliquem com crear un subconjunt de fonts personalitzat que només inclogui els caràcters utilitzats en el teu encapçalament.<h2 id=requisits><a aria-label="Anchor link for: requisits" class="header-anchor no-hover-padding" href=#requisits><span aria-hidden=true class=link-icon></span></a> Requisits</h2><p>Instal·la aquestes eines:<ul><li><p><a class=external href=https://github.com/fonttools/fonttools rel=external>fonttools</a></p><li><p><a class=external href=https://github.com/google/brotli rel=external>brotli</a></p></ul><p>Executa <code>pip install fonttools brotli</code> per instal·lar totes dues.<h2 id=l-script><a aria-label="Anchor link for: l-script" class="header-anchor no-hover-padding" href=#l-script><span aria-hidden=true class=link-icon></span></a> L’script</h2><p>El següent script pren un fitxer <code>config.toml</code> i un fitxer de font com a entrada, extreu els caràcters necessaris, crea un subconjunt de la font i genera un fitxer CSS que conté el subconjunt codificat en base64.<pre class="giallo z-code"><code data-lang=shellscript><span class=giallo-l><span class="z-punctuation z-definition z-comment z-shebang z-shell z-meta z-shebang z-shell">#!/usr/bin/env bash</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-entity z-name z-function">usage</span><span class=z-punctuation>() {</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span><span class="z-punctuation z-definition z-string z-string"> "Usage: </span><span class="z-variable z-parameter">$0</span><span class="z-string z-punctuation z-definition z-string"> [--config | -c CONFIG_FILE] [--font | -f FONT_FILE] [--output | -o OUTPUT_PATH]"</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span><span class="z-punctuation z-definition z-string z-string"> "Options:"</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span><span class="z-punctuation z-definition z-string z-string"> " --config, -c Path to the config.toml file."</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span><span class="z-punctuation z-definition z-string z-string"> " --font, -f Path to the font file."</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span><span class="z-punctuation z-definition z-string z-string"> " --output, -o Output path for the generated custom_subset.css file (default: current directory)"</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span><span class="z-punctuation z-definition z-string z-string"> " --help, -h Show this help message and exit"</span></span>
<span class=giallo-l><span class=z-punctuation>}</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># La sortida per defecte és el directori actual.</span></span>
<span class=giallo-l><span class=z-source>output_path</span><span class="z-keyword z-operator">=</span><span class="z-punctuation z-definition z-string z-string">"."</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Opcions de la línia de comandes.</span></span>
<span class=giallo-l><span class=z-keyword>while</span><span class=z-punctuation> [</span><span class="z-punctuation z-definition z-string"> "</span><span class=z-variable>$#</span><span class="z-punctuation z-definition z-string">"</span><span class="z-keyword z-operator"> -gt</span><span class="z-constant z-numeric"> 0</span><span class=z-punctuation> ];</span><span class=z-keyword> do</span></span>
<span class=giallo-l><span class=z-keyword> case</span><span class="z-punctuation z-definition z-string"> "</span><span class="z-variable z-parameter">$1</span><span class="z-punctuation z-definition z-string">"</span><span class=z-keyword> in</span></span>
<span class=giallo-l><span class=z-string> --config</span><span class=z-punctuation>|</span><span class=z-string>-c</span><span class="z-keyword z-operator">)</span></span>
<span class=giallo-l><span class=z-source> config_file</span><span class="z-keyword z-operator">=</span><span class="z-punctuation z-definition z-string">"</span><span class="z-variable z-parameter">$2</span><span class="z-punctuation z-definition z-string">"</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> shift</span><span class="z-constant z-numeric"> 2</span></span>
<span class=giallo-l><span class=z-punctuation> ;;</span></span>
<span class=giallo-l><span class=z-string> --font</span><span class=z-punctuation>|</span><span class=z-string>-f</span><span class="z-keyword z-operator">)</span></span>
<span class=giallo-l><span class=z-source> font_file</span><span class="z-keyword z-operator">=</span><span class="z-punctuation z-definition z-string">"</span><span class="z-variable z-parameter">$2</span><span class="z-punctuation z-definition z-string">"</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> shift</span><span class="z-constant z-numeric"> 2</span></span>
<span class=giallo-l><span class=z-punctuation> ;;</span></span>
<span class=giallo-l><span class=z-string> --output</span><span class=z-punctuation>|</span><span class=z-string>-o</span><span class="z-keyword z-operator">)</span></span>
<span class=giallo-l><span class=z-source> output_path</span><span class="z-keyword z-operator">=</span><span class="z-punctuation z-definition z-string">"</span><span class="z-variable z-parameter">$2</span><span class="z-punctuation z-definition z-string">"</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> shift</span><span class="z-constant z-numeric"> 2</span></span>
<span class=giallo-l><span class=z-punctuation> ;;</span></span>
<span class=giallo-l><span class=z-string> --help</span><span class=z-punctuation>|</span><span class=z-string>-h</span><span class="z-keyword z-operator">)</span></span>
<span class=giallo-l><span class="z-entity z-name z-function"> usage</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> exit</span><span class="z-constant z-numeric"> 0</span></span>
<span class=giallo-l><span class=z-punctuation> ;;</span></span>
<span class=giallo-l><span class="z-keyword z-operator"> *)</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span><span class="z-punctuation z-definition z-string z-string"> "Unknown option: </span><span class="z-variable z-parameter">$1</span><span class="z-punctuation z-definition z-string">"</span></span>
<span class=giallo-l><span class="z-entity z-name z-function"> usage</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> exit</span><span class="z-constant z-numeric"> 1</span></span>
<span class=giallo-l><span class=z-punctuation> ;;</span></span>
<span class=giallo-l><span class=z-keyword> esac</span></span>
<span class=giallo-l><span class=z-keyword>done</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Comprova si s'han proporcionat les opcions -c i -f.</span></span>
<span class=giallo-l><span class=z-keyword>if</span><span class=z-punctuation> [</span><span class="z-keyword z-operator"> -z</span><span class="z-punctuation z-definition z-string"> "</span><span class="z-variable z-other z-normal z-shell">$config_file</span><span class="z-punctuation z-definition z-string">"</span><span class=z-punctuation> ];</span><span class=z-keyword> then</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span><span class="z-punctuation z-definition z-string z-string"> "Error: --config|-c option is required."</span></span>
<span class=giallo-l><span class="z-entity z-name z-function"> usage</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> exit</span><span class="z-constant z-numeric"> 1</span></span>
<span class=giallo-l><span class=z-keyword>fi</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class=z-keyword>if</span><span class=z-punctuation> [</span><span class="z-keyword z-operator"> -z</span><span class="z-punctuation z-definition z-string"> "</span><span class="z-variable z-other z-normal z-shell">$font_file</span><span class="z-punctuation z-definition z-string">"</span><span class=z-punctuation> ];</span><span class=z-keyword> then</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span><span class="z-punctuation z-definition z-string z-string"> "Error: --font|-f option is required."</span></span>
<span class=giallo-l><span class="z-entity z-name z-function"> usage</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> exit</span><span class="z-constant z-numeric"> 1</span></span>
<span class=giallo-l><span class=z-keyword>fi</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Comprova si els fitxers de configuració i de font existeixen.</span></span>
<span class=giallo-l><span class=z-keyword>if</span><span class=z-punctuation> [</span><span class="z-keyword z-operator"> ! -f</span><span class="z-punctuation z-definition z-string"> "</span><span class="z-variable z-other z-normal z-shell">$config_file</span><span class="z-punctuation z-definition z-string">"</span><span class=z-punctuation> ];</span><span class=z-keyword> then</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span><span class="z-punctuation z-definition z-string z-string"> "Error: Config file '</span><span class="z-variable z-other z-normal z-shell">$config_file</span><span class="z-string z-punctuation z-definition z-string">' not found."</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> exit</span><span class="z-constant z-numeric"> 1</span></span>
<span class=giallo-l><span class=z-keyword>fi</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class=z-keyword>if</span><span class=z-punctuation> [</span><span class="z-keyword z-operator"> ! -f</span><span class="z-punctuation z-definition z-string"> "</span><span class="z-variable z-other z-normal z-shell">$font_file</span><span class="z-punctuation z-definition z-string">"</span><span class=z-punctuation> ];</span><span class=z-keyword> then</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span><span class="z-punctuation z-definition z-string z-string"> "Error: Font file '</span><span class="z-variable z-other z-normal z-shell">$font_file</span><span class="z-string z-punctuation z-definition z-string">' not found."</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> exit</span><span class="z-constant z-numeric"> 1</span></span>
<span class=giallo-l><span class=z-keyword>fi</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Extreu el títol i els noms del menú del fitxer de configuració.</span></span>
<span class=giallo-l><span class=z-source>title</span><span class="z-keyword z-operator">=</span><span class=z-punctuation>$(</span><span class="z-entity z-name z-function">awk</span><span class="z-string z-punctuation z-definition z-string"> -F' = ' '/^title/{print $2}' "</span><span class="z-variable z-other z-normal z-shell">$config_file</span><span class="z-punctuation z-definition z-string">"</span><span class="z-keyword z-operator"> |</span><span class="z-entity z-name z-function"> tr</span><span class="z-string z-punctuation z-definition z-string"> -d '"'</span><span class=z-punctuation>)</span></span>
<span class=giallo-l><span class=z-source>menu_names</span><span class="z-keyword z-operator">=</span><span class=z-punctuation>$(</span><span class="z-entity z-name z-function">awk</span><span class="z-string z-punctuation z-definition z-string"> -F' = ' '/^menu/{f=1;next} /socials/{f=0} f && /name/{print $2}' "</span><span class="z-variable z-other z-normal z-shell">$config_file</span><span class="z-punctuation z-definition z-string">"</span><span class="z-keyword z-operator"> |</span><span class="z-entity z-name z-function"> cut</span><span class="z-string z-punctuation z-definition z-string"> -d',' -f1</span><span class="z-keyword z-operator"> |</span><span class="z-entity z-name z-function"> tr</span><span class="z-string z-punctuation z-definition z-string"> -d '"'</span><span class=z-punctuation> )</span></span>
<span class=giallo-l><span class=z-source>language_names</span><span class="z-keyword z-operator">=</span><span class=z-punctuation>$(</span><span class="z-entity z-name z-function">awk</span><span class="z-string z-punctuation z-definition z-string"> -F' = ' '/^language_name\./{print $2}' "</span><span class="z-variable z-other z-normal z-shell">$config_file</span><span class="z-punctuation z-definition z-string">"</span><span class="z-keyword z-operator"> |</span><span class="z-entity z-name z-function"> tr</span><span class="z-string z-punctuation z-definition z-string"> -d '"'</span><span class=z-punctuation> )</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Si el lloc web és multilingüe, obté les traduccions del menú.</span></span>
<span class=giallo-l><span class=z-keyword>if</span><span class=z-punctuation> [</span><span class="z-keyword z-operator"> -n</span><span class="z-punctuation z-definition z-string"> "</span><span class="z-variable z-other z-normal z-shell">$language_names</span><span class="z-punctuation z-definition z-string">"</span><span class=z-punctuation> ];</span><span class=z-keyword> then</span></span>
<span class=giallo-l><span class=z-keyword> for</span><span class=z-source> menu_name</span><span class=z-keyword> in</span><span class="z-punctuation z-definition z-variable z-source"> $menu_names</span><span class=z-punctuation>;</span><span class=z-keyword> do</span></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"> # Find the line with the menu name inside a [languages.*.translations] section and get the translated menus.</span></span>
<span class=giallo-l><span class=z-source> menu_translation</span><span class="z-keyword z-operator">=</span><span class=z-punctuation>$(</span><span class="z-entity z-name z-function">awk</span><span class="z-string z-punctuation z-definition z-string"> -F' = ' "/</span><span class="z-constant z-character z-escape">\\</span><span class=z-string>[languages.*</span><span class="z-constant z-character z-escape">\\</span><span class=z-string>.translations</span><span class="z-constant z-character z-escape">\\</span><span class=z-string>]/{f=1;next} /^</span><span class="z-constant z-character z-escape">\\</span><span class=z-string>[/ {f=0} f && /</span><span class="z-variable z-other z-normal z-shell">$menu_name</span><span class=z-string> =/{print </span><span class="z-constant z-character z-escape">\$</span><span class="z-string z-punctuation z-definition z-string">2}" "</span><span class="z-variable z-other z-normal z-shell">$config_file</span><span class="z-punctuation z-definition z-string">"</span><span class="z-keyword z-operator"> |</span><span class="z-entity z-name z-function"> tr</span><span class="z-string z-punctuation z-definition z-string"> -d '"'</span><span class=z-punctuation> )</span></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"> # Add the found menu value to the translations string</span></span>
<span class=giallo-l><span class=z-source> menu_names</span><span class="z-keyword z-operator">+=</span><span class="z-punctuation z-definition z-string">"</span><span class="z-variable z-other z-normal z-shell">$menu_translation</span><span class="z-punctuation z-definition z-string">"</span></span>
<span class=giallo-l><span class=z-keyword> done</span></span>
<span class=giallo-l><span class=z-keyword>fi</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Combina les cadenes extretes.</span></span>
<span class=giallo-l><span class=z-source>combined</span><span class="z-keyword z-operator">=</span><span class="z-punctuation z-definition z-string">"</span><span class="z-variable z-other z-normal z-shell">$title$menu_names$language_names</span><span class="z-punctuation z-definition z-string">"</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Obté els caràcters únics.</span></span>
<span class=giallo-l><span class=z-source>unique_chars</span><span class="z-keyword z-operator">=</span><span class=z-punctuation>$(</span><span class="z-support z-function z-builtin">echo</span><span class="z-punctuation z-definition z-string"> "</span><span class="z-variable z-other z-normal z-shell">$combined</span><span class="z-punctuation z-definition z-string">"</span><span class="z-keyword z-operator"> |</span><span class="z-entity z-name z-function"> grep</span><span class=z-string> -o .</span><span class="z-keyword z-operator"> |</span><span class="z-entity z-name z-function"> sort</span><span class=z-string> -u</span><span class="z-keyword z-operator"> |</span><span class="z-entity z-name z-function"> tr</span><span class="z-string z-punctuation z-definition z-string"> -d '\n'</span><span class=z-punctuation>)</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Crea un fitxer temporal per a subset.woff2.</span></span>
<span class=giallo-l><span class=z-source>temp_subset</span><span class="z-keyword z-operator">=</span><span class=z-punctuation>$(</span><span class="z-entity z-name z-function">mktemp</span><span class=z-punctuation>)</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Crea el subconjunto.</span></span>
<span class=giallo-l><span class="z-entity z-name z-function">pyftsubset</span><span class="z-punctuation z-definition z-string"> "</span><span class="z-variable z-other z-normal z-shell">$font_file</span><span class="z-punctuation z-definition z-string">"</span><span class="z-constant z-character z-escape"> \</span></span>
<span class=giallo-l><span class="z-string z-punctuation z-definition z-string"> --text="</span><span class="z-variable z-other z-normal z-shell">$unique_chars</span><span class="z-punctuation z-definition z-string">"</span><span class="z-constant z-character z-escape"> \</span></span>
<span class=giallo-l><span class="z-string z-punctuation z-definition z-string"> --layout-features="*" --flavor="woff2" --output-file="</span><span class="z-variable z-other z-normal z-shell">$temp_subset</span><span class="z-punctuation z-definition z-string z-string">" --with-zopfli</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Codifica en base64 el fitxer temporal subset.woff2 i crea el fitxer CSS.</span></span>
<span class=giallo-l><span class=z-source>base64_encoded_font</span><span class="z-keyword z-operator">=</span><span class=z-punctuation>$(</span><span class="z-entity z-name z-function">base64</span><span class="z-string z-punctuation z-definition z-string"> -i "</span><span class="z-variable z-other z-normal z-shell">$temp_subset</span><span class="z-punctuation z-definition z-string">"</span><span class=z-punctuation>)</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin">echo</span><span class="z-punctuation z-definition z-string z-string"> "@font-face{font-family:</span><span class="z-constant z-character z-escape">\"</span><span class=z-string>Inter Subset</span><span class="z-constant z-character z-escape">\"</span><span class=z-string>;src:url(data:application/font-woff2;base64,</span><span class="z-variable z-other z-normal z-shell">$base64_encoded_font</span><span class="z-string z-punctuation z-definition z-string">);}"</span><span class="z-keyword z-operator"> ></span><span class="z-punctuation z-definition z-string"> "</span><span class="z-variable z-other z-normal z-shell">$output_path</span><span class="z-string z-punctuation z-definition z-string">/custom_subset.css"</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Elimina el fitxer temporal subset.woff2.</span></span>
<span class=giallo-l><span class="z-entity z-name z-function">rm</span><span class="z-punctuation z-definition z-string"> "</span><span class="z-variable z-other z-normal z-shell">$temp_subset</span><span class="z-punctuation z-definition z-string">"</span></span></code></pre><h2 id=us><a aria-label="Anchor link for: us" class="header-anchor no-hover-padding" href=#us><span aria-hidden=true class=link-icon></span></a> Ús</h2><p>Guarda l’script a algun lloc com <code>~/bin/subset_font</code>. Fes-lo executable amb <code>chmod +x ~/bin/subset_font</code>.<p>Ara pots executar-lo amb les opcions requerides <code>--config</code> i <code>--font</code>:<pre class="giallo z-code"><code data-lang=shellscript><span class=giallo-l><span class="z-keyword z-operator">~</span><span class=z-source>/bin/subset_font --config path/to/config.toml --font path/to/font.woff2</span></span></code></pre><p>De forma predeterminada, això generarà un fitxer <code>custom_subset.css</code> al directori actual. Utilitza <code>-o</code> o <code>--output</code> per especificar una ruta diferent:<pre class="giallo z-code"><code data-lang=shellscript><span class=giallo-l><span class="z-keyword z-operator">~</span><span class=z-source>/bin/subset_font -c path/to/config.toml -f path/to/font.woff2 -o path/to/output</span></span></code></pre><p>Col·loca aquest fitxer <code>custom_subset.css</code> dins del directori <code>static/</code> del teu projecte de Zola.<h2 id=automatitzacio-amb-un-pre-commit-hook><a aria-label="Anchor link for: automatitzacio-amb-un-pre-commit-hook" class="header-anchor no-hover-padding" href=#automatitzacio-amb-un-pre-commit-hook><span aria-hidden=true class=link-icon></span></a> Automatització amb un Pre-commit Hook</h2><p>És possible que canviïs el títol o les opcions del menú del teu lloc web, la qual cosa faria que el subconjunt personalitzat deixés de ser útil.<p>Per automatitzar el procés de creació d’aquest fitxer, pots integrar l’script en un ganxo (hook) pre-commit de Git que s’activi en detectar canvis al fitxer <code>config.toml</code>, executi l’script i guardi el fitxer CSS resultant al directori <code>static/</code> del teu lloc web.<ol><li><p>Crea un fitxer <code>.git/hooks/pre-commit</code> al teu projecte de Git, si encara no existeix.</p><li><p>Fes-lo executable amb <code>chmod +x .git/hooks/pre-commit</code>.</p><li><p>Afegeix el següent codi al fitxer:</p></ol><pre class="giallo z-code"><code data-lang=shellscript><span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Comprova si config.toml s'ha modificat.</span></span>
<span class=giallo-l><span class=z-keyword>if</span><span class="z-entity z-name z-function"> git</span><span class=z-string> diff --cached --name-only</span><span class="z-keyword z-operator"> |</span><span class="z-entity z-name z-function"> grep</span><span class="z-string z-punctuation z-definition z-string"> -q "config.toml"</span><span class=z-punctuation>;</span><span class=z-keyword> then</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span><span class="z-punctuation z-definition z-string z-string"> "config.toml modified. Running subset_font…"</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"> # Executa l'script subset_font.</span></span>
<span class=giallo-l><span class="z-entity z-name z-function"> ~/bin/subset_font</span><span class=z-string> -c config.toml -f static/fonts/Inter4.woff2 -o static/</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"> # Afegeix el fitxer subset.css generat al commit.</span></span>
<span class=giallo-l><span class="z-entity z-name z-function"> git</span><span class=z-string> add static/custom_subset.css</span></span>
<span class=giallo-l><span class=z-keyword>fi</span></span></code></pre><p>Asegura’t de modificar l’script perquè coincideixi amb la ruta on has guardat l’script <code>subset_font</code>. Les rutes de configuració i font haurien de funcionar correctament amb la configuració predeterminada de tabi.<p>Ara, cada vegada que facis canvis al teu projecte de Git i facis commit, el ganxo pre-commit verificarà les modificacions al fitxer <code>config.toml</code> i executarà automàticament l’script <code>subset_font</code> per actualitzar el fitxer <code>custom_subset.css</code>.<p>Per cert, si t’interessa una forma d’actualitzar automàticament la data de les teves publicacions a Zola o comprimir automàticament els teus fitxers PNG, fes un cop d’ull a <a class=external href=https://osc.garden/ca/blog/zola-date-git-hook/ rel=external>aquesta publicació</a>.<p>Si desitges utilitzar tots els scripts alhora (compressió de fitxers PNG, actualització de la data i creació del subconjunt de fonts), combina el seu codi en un sol fitxer <code>.git/hooks/pre-commit</code>.</section><form action="https://vhiweeypifbwacashxjz.supabase.co/rest/v1/rpc/increment_hits?apikey=sb_publishable_EoB7MFJhCmb6PiAk-GPJ4w_PGhQ44Ru" class=iine-form method=post><input name=page_slug type=hidden value=/blog/custom-font-subset/><button aria-label="M'agrada aquesta publicació" title="M'agrada aquesta publicació" class=iine-button data-icon=thumbs_up data-slug=/blog/custom-font-subset/>👍</button></form><nav class="full-width article-navigation"><div><a aria-describedby=left_title aria-label=Següent href=https://welpo.github.io/tabi/ca/blog/comments/><span class=arrow>←</span> Següent</a><p aria-hidden=true id=left_title>Afegeix comentaris a les teves publicacions amb aquestes 4 plataformes</div><div><a aria-describedby=right_title aria-label=Anterior href=https://welpo.github.io/tabi/ca/blog/security/>Anterior <span class=arrow>→</span></a><p aria-hidden=true id=right_title>Seguretat per defecte</div></nav></article></main><span class=hidden id=copy-success> Copiat! </span><span class=hidden id=copy-init> Copia el codi al porta-retalls </span><script defer src=https://welpo.github.io/tabi/js/copyCodeToClipboard.min.js></script><script defer src=https://cdn.jsdelivr.net/gh/welpo/iine@main/iine.mini.js></script></div><footer><section><nav class="socials nav-navs"><ul><li><a class="nav-links no-hover-padding social" href=https://welpo.github.io/tabi/ca/atom.xml> <img alt=feed loading=lazy src=https://welpo.github.io/tabi/social_icons/rss.svg title=feed> </a><li class=js><a class="nav-links no-hover-padding social" data-encoded-email=dGFiaUBvc2MuZ2FyZGVu href=#><img alt=email loading=lazy src=https://welpo.github.io/tabi/social_icons/email.svg title=email> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://github.com/welpo/> <img alt=github loading=lazy src=https://welpo.github.io/tabi/social_icons/github.svg title=github> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://soundcloud.com/oskerwyld> <img alt=soundcloud loading=lazy src=https://welpo.github.io/tabi/social_icons/soundcloud.svg title=soundcloud> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://instagram.com/oskerwyld> <img alt=instagram loading=lazy src=https://welpo.github.io/tabi/social_icons/instagram.svg title=instagram> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://youtube.com/@oskerwyld> <img alt=youtube loading=lazy src=https://welpo.github.io/tabi/social_icons/youtube.svg title=youtube> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE> <img alt=spotify loading=lazy src=https://welpo.github.io/tabi/social_icons/spotify.svg title=spotify> </a></ul></nav><nav class=nav-navs><small> <ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/ca/about/> sobre mi </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/ca/privacy/> política de privadesa </a><li><a class="nav-links no-hover-padding" href=https://tabi-stats.osc.garden/> estadístiques del lloc </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/sitemap.xml> mapa del lloc </a></ul> </small></nav><div class=credits><small> Propulsat per <a href=https://www.getzola.org>Zola</a> i <a href=https://github.com/welpo/tabi>tabi</a> • <a href=https://github.com/welpo/tabi> Codi del lloc </a></small></div></section><script async src=https://welpo.github.io/tabi/js/decodeMail.min.js></script></footer>
Reference in a new issue View git blame Copy permalink