Skip to content

Kaikki WordPressistä, web-kehityksestä — ja paljon muuta

🔤 Fira Code: monospace-fontti ligatuureilla ohjelmointiin

🔤 Fira Code: monospace-fontti ligatuureilla ohjelmointiin

Esimerkki koodista Fira Code -ligatuureilla editorissa

Mitä ligatuurit ovat ja miksi niillä on merkitystä koodissa

Ligatuuri on kahden tai kolmen merkin yhdistelmä yhdeksi visuaaliseksi glyyfiksi. Typografiassa tämä tekniikka on tunnettu vuosisatoja: kirjaimet "f" ja "i" sulautuvat muotoon fi, jotta ne eivät törmäisi toisiinsa. Ohjelmoinnissa sama mekanismi toimii operaattoreiden kanssa.

Kun kirjoitat != ja sen perään => ja >= tai ===, silmäsi lukee ne yhtenä loogisena kokonaisuutena. Ruudulla ne ovat kuitenkin kaksi tai kolme erillistä merkkiä, ja aivosi tekevät mikrotason työtä niiden yhdistämiseksi. Työpäivän aikana näitä mikro-operaatioita kertyy tuhansia. Ligatuurit ratkaisevat ongelman: != muuttuu yliviivatuksi yhtäsuuruusmerkiksi (≠), => lihavoiduksi nuoleksi ja >= näyttää yhtenäiseltä "suurempi tai yhtä suuri" -symbolilta.

Kehittäjä Nikita Prokopov (tonsky) rakensi kokonaisen fontin tämän idean ympärille. Fira Code on ilmainen tasalevyinen kirjasinperhe, joka perustuu Fira Monoon ja jota on laajennettu ohjelmointiligatuureilla. Pohjimmiltaan se on puhdasta ASCII:ta: lähdekoodi ei muutu, vaan renderöinti tapahtuu fonttitasolla. Tiedosto pysyy samana, mutta luettavuus muuttuu.

💡 Nopea yleiskatsaus:

  • Lataa Fira Code GitHubin release-sivulta: ZIP ~2,5 Mt, versio 6.2, ilmainen
  • Asenna fontti järjestelmääsi ja aseta editorissasi editor.fontFamily ja editor.fontLigatures
  • Valitse tyylisetit ja merkkivariantit makusi mukaan: ss01:stä cv31:een
  • Tarkista editorisi tuki virallisesta yhteensopivuustaulukosta GitHubissa

Miten Fira Code muuttaa koodin lukemista

Ensimmäinen asia, joka pistää silmään asennuksen jälkeen: vertailuoperaattorit. Siinä missä ennen oli != (huutomerkki + yhtäsuuruus), nyt on yhtenäinen yliviivattu symboli. <= ja >= näyttävät oppikirjan matemaattisilta merkeiltä, eivät kahdelta erilliseltä ASCII-merkiltä.

Nuolet ovat omanlaisensa taika. Mikä tahansa ketju tavuviivoja ja kulmasulkeita kokoontuu yhtenäiseksi viivaksi. Kokeile -->, <-- ja <-->: ne sulautuvat yhtenäiseksi nuoleksi. Fira Code 4:ssä kehittäjä korvasi 44 yksittäistä nuoliligatuuria neljällä kombinatorisella säännöllä. Nyt nuolet voivat olla minkä pituisia tahansa. Jopa ---> ja <--- toimivat.

Myös monimerkkiset operaattorit kokoontuvat yhtenäisiksi glyyfeiksi: === ja !==, :: ja //, |||. Kommentit kuten <!-- --> näyttävät siistimmiltä. Funktionaalisen ohjelmoinnin ystäville löytyy |> ja >>= sekä =<<, ja kymmeniä muita.

Alla on sama PHP-koodi ilman Fira Codea ja sen kanssa. Ero ei ole dramaattinen, mutta kokeile "etsi eroavaisuudet": silmäsi havaitsee operaattorit nopeammin.

Ilman Fira Codea

1/**
2 * Arrows --> and -->> illustrate data flow.
3 */
4$out = array('');
5$pieces = array(
6 '<!-- HTML -->', 'https://www.example.com/#!', 'red', '&#35;&#35;', 0x0, ''
7);
8for ($i = 0; $i <= 5; $i++) {
9 if ($i == '2' || $pieces[$i] === 'red') {
10 $hex__red = 0xca0000;
11 $out[] = $hex__red >> 15; // 404
12 } elseif ($i !== 3 && $pieces[$i] != false) {
13 $out[] = $pieces[$i];
14 }
15}
16echo implode('', $out);

Fira Coden kanssa

1/**
2 * Arrows --> and -->> illustrate data flow.
3 */
4$out = array('');
5$pieces = array(
6 '<!-- HTML -->', 'https://www.example.com/#!', 'red', '&#35;&#35;', 0x0, ''
7);
8for ($i = 0; $i <= 5; $i++) {
9 if ($i == '2' || $pieces[$i] === 'red') {
10 $hex__red = 0xca0000;
11 $out[] = $hex__red >> 15; // 404
12 } elseif ($i !== 3 && $pieces[$i] != false) {
13 $out[] = $pieces[$i];
14 }
15}
16echo implode('', $out);

Molemmat lohkot ovat merkki merkiltä identtisiä. Vain fontti eroaa. Jälkimmäisessä tapauksessa <= ja >= muuttuivat yhtenäisiksi merkeiksi, != ja !== näyttävät yliviivatuilta ja --> muuttui nuoleksi. Lukeminen nopeutuu, ei radikaalisti, mutta huomattavasti. Erityisesti pitkien koodikatselmointisessioiden aikana.

Missä Fira Code toimii

Fonttia tukevat kymmenet editorit: VS Codesta ja Sublime Textistä Vimiin ja Emacsiin. Täydellinen lista löytyy GitHubin yhteensopivuustaulukosta.

Keskeiset alustat:

  • VS Code: natiivituki. Lisää settings.json-tiedostoon "editor.fontFamily": "'Fira Code'", "editor.fontLigatures": true. Tyylisetit otetaan käyttöön näin: "editor.fontLigatures": "'calt', 'ss02', 'ss09'".

  • JetBrains IDE (IntelliJ, PhpStorm, WebStorm, Rider): versiosta 2016.2 alkaen. Asetus: Editor → Font → valitse Fira Code → ota käyttöön Enable ligatures.

  • Sublime Text: build 3146:sta alkaen. Käyttäjäasetuksissa: "font_face": "Fira Code".

  • Vim/Neovim: GUI-versioissa set guiligatures-komennolla ja päätelaitteessa korjaustiedostojen avulla.

  • Terminaalit: Windowsin Terminal, iTerm 2, Kitty, Konsole, Tabby, Hyper, WezTerm. Ei tuettu: Alacritty, GNOME Terminal, xterm, PuTTY.

  • Selaimet: jsdelivr-CDN:n kautta. Sisällytä <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/distr/fira_code.css"> ja lisää font-feature-settings: "calt"; IE:tä / vanhaa Edgeä varten.

Käytännössä asennus näyttää tältä: lataa ZIP release-sivulta, asenna TTF järjestelmääsi, aseta fontti editorissasi, ota ligatuurit käyttöön. Siinä kaikki. Ei liitännäisiä, ei taikuutta, vain puhdas @font-face käyttöjärjestelmätasolla.

Hienosäätö: variantit ja tyylisetit

Fira Coden tärkein etu kilpailijoihin nähden on joustavuus. Etkö pidä tietystä ligatuurista? Poista se käytöstä. Haluatko erilaisen kirjainmuodon? Valitse merkkivariantti. Kaikki on muokattavissa hienojakoisesti.

Merkkivariantit (cv01-cv31) muuttavat yksittäisten merkkien muotoa:

  • cv01-cv10: vaihtoehtoiset mallit kirjaimille a ja g sekä i ja l
  • cv11-cv13: nollavariantit (pisteellä, ilman, vinoviivalla)
  • cv14: vaihtoehtoinen kolmonen
  • cv15: ylös tasattu asteriski (kätevä C/C++-osoittimille)
  • cv31: vaihtoehtoiset sulkeet ()

Tyylisetit (ss01-ss10) ohjaavat ligatuureja:

  • ss01: &&:n vaihtoehtoinen renderöinti
  • ss02: <= ilman kallistusta, vaakaviivalla
  • ss03: & kirjoituskonetyyliin
  • ss04: dollarin merkki $ ilman vinoviivaa
  • ss05: @ ilman kiemurahäntää
  • ss09: palauttaa erilliset >>= / <<= / ||= (poistettu oletuksesta v6:ssa, lisätietoja GitHubissa)

Edistymispalkit ansaitsevat erityismaininnan. Fira Code on ensimmäinen ohjelmointifontti, jossa merkit U+EE00-U+EE0B renderöityvät edistymispalkin pätkänä. Terminaali tulostaa sekvenssin ``, ja käyttäjä näkee siistin täytön. Tuen havaitsemiseen on ehdotettu ympäristömuuttujaa UNICODE_PROGRESS_BAR=true.

Vaihtoehdot: mihin verrata

Fira Code ei ole ainoa ligatuurifontti. Markkinat ovat laajentuneet viime vuosina, ja jokaisella vaihtoehdolla on oma painopisteensä:

Fontti

Lisenssi

Ominaisuus

JetBrains Mono

SIL OFL

Paranneltu luettavuus, vaihteleva pienaakkosten korkeus, ei pyöristystä

Cascadia Code

SIL OFL

Microsoftin fontti Terminalille, Powerline-tuki, laatikkopiirto

Iosevka

SIL OFL

Kapea fontti, koodilla generoitu, maksimaalisen tiivis

Victor Mono

MIT

Aidot kursiivit päätteineen, ei pelkkä kallistus

Hasklig

SIL OFL

Source Code Pro -haara, jossa ligatuurit Haskellille

Monoid

MIT

Powerline-tuki, muokattava leveys

Fira Code voittaa ei yksittäisten kirjainten kauneuden vuoksi (se on subjektiivista), vaan laajuutensa ja kypsyytensä ansiosta. 81 000 tähteä GitHubissa, kuusi pääjulkaisua, sadat tuetut editorit, 31 merkkivarianttia, edistymispalkit, matemaattiset symbolit, laatikkopiirto ja Powerline-tuki. Kun valitset fonttia vuosiksi eteenpäin, ekosysteemillä on yhtä paljon merkitystä kuin estetiikalla.

⁉️🤔 Usein kysytyt kysymykset

Asensin Fira Coden, mutta ligatuurit eivät ilmestyneet. Mikä on vialla?

Todennäköisesti editorisi vaatii erillisen käyttöönoton. VS Codessa se on "editor.fontLigatures": true. JetBrains IDE:ssä: valitse "Enable ligatures" fonttiasetuksista. Terminaaleissa varmista, tukeeko emulaattorisi ligatuureja: Windows Terminal tukee, ConEmu ei.

Ligatuurit häiritsevät. Voinko pitää vain osan?

Kyllä. Tyylisetit ss01-ss10 ottavat käyttöön ja poistavat käytöstä ligatuuriryhmiä. Esimerkiksi ss09 palauttaa erilliset >>= ja <<=. Hienojakoista muokkausta varten voit kääntää fontin paikallisesti komennolla ./script/build.sh --features "ss02,ss08,cv14".

Fira Code on hidas editorissani. Onko tämä normaalia?

Versio 4 sisälsi renderöinnin optimoinnin: 44 erillistä nuoliligatuuria korvattiin neljällä kombinatorisella säännöllä, mikä paransi suorituskykyä 100-150%. Jos se on nyt hidas, tarkista, onko muita fonttiominaisuuksia otettu käyttöön samanaikaisesti (calt ja ss-setit eivät yleensä aiheuta viiveitä).

Millainen on kyrillisten kirjainten tuki Fira Codessa?

Kyrillinen merkistö on peritty Fira Monosta: luettava, neutraali, vaatimaton. Se riittää venäjänkieliseen koodiin (kommentit, merkkijonot). Mutta jos kirjoitat laajaa dokumentaatiota venäjäksi, harkitse JetBrains Monoa: sen kyrillinen tuki on paremmin kehitetty.

Kannattaako Fira Codeen vaihtaa vuonna 2026

Fonttia ei ole päivitetty joulukuun 2021 jälkeen. Ja tämä on, kummallista kyllä, hyvä merkki. Kun tuote saavuttaa tilan "toimii eikä hajoa", tiheitä päivityksiä ei tarvita. Viidessä vuodessa ilman julkaisuja kukaan ei ole kirjoittanut "Fira Code on kuollut". Ihmiset vain käyttävät sitä.

Jos vietät yli 4 tuntia päivässä koodaten, asenna Fira Code viikoksi. Tunnet paluun vanhaan fonttiisi nopeammin kuin odotat: silmä tottuu lukemaan operaattoreita yhtenäisinä kokonaisuuksina, ja paluu "osiin purettuihin" merkkeihin tuntuu askeleelta taaksepäin. Pahinta mitä voi tapahtua: poistat fontin seitsemän päivän jälkeen. Parasta: löydät työkalusi vuosiksi eteenpäin.