Skip to content

Allt om WordPress, webbutveckling — och mer därtill

🔤 Fira Code: ett monospace-teckensnitt med ligaturer för programmering

🔤 Fira Code: ett monospace-teckensnitt med ligaturer för programmering

Exempel på kod med Fira Code-ligaturer i en editor

Vad ligaturer är och varför de spelar roll i kod

En ligatur är kombinationen av två eller tre tecken till en enda visuell glyf. Inom typografin har denna teknik varit känd i århundraden: bokstäverna "f" och "i" smälter ihop till fi för att undvika att krocka med varandra. Inom programmering fungerar samma mekanism med operatorer.

När du skriver != följt av => och >= eller === läser ditt öga dem som en enda logisk enhet. Men på skärmen är det två eller tre separata tecken, och din hjärna lägger mikroansträngningar på att kombinera dem. Under en arbetsdag blir dessa mikrooperationer tusentals. Ligaturer löser problemet: != blir ett överstruket likhetstecken (≠), => blir en fet pil, och >= ser ut som en enhetlig "större än eller lika med"-symbol.

Utvecklaren Nikita Prokopov (tonsky) byggde ett helt typsnitt kring denna idé. Fira Code är en fri monospacerad familj baserad på Fira Mono, utökad med programmeringsligaturer. Under huven är det ren ASCII: källkoden förändras inte, renderingen sker på typsnittsnivå. Filen förblir densamma men läses annorlunda.

💡 Snabb översikt:

  • Ladda ner Fira Code från GitHub-releasen: ZIP ~2,5 MB, version 6.2, gratis
  • Installera typsnittet på ditt system och ställ in editor.fontFamily och editor.fontLigatures i din editor
  • Välj stilistiska set och teckenvariationer efter smak: från ss01 till cv31
  • Kontrollera din editors stöd i den officiella kompatibilitetstabellen på GitHub

Hur Fira Code förändrar kodläsning

Det första som fångar ögat efter installation: jämförelseoperatorer. Där det tidigare stod != (utropstecken + likhetstecken) finns nu en enhetlig överstruken symbol. <= och >= ser ut som matematiska tecken från en lärobok, inte två separata ASCII-tecken.

Pilar är en särskild sorts magi. Varje kedja av bindestreck och vinkelparenteser sätts ihop till en sammanhängande linje. Testa -->, <-- och <-->: de smälter ihop till en heldragen pil. I Fira Code 4 ersatte utvecklaren 44 individuella pilligaturer med fyra kombinatoriska regler. Nu kan pilar vara hur långa som helst. Även ---> och <--- fungerar.

Flersymbolsoperatorer sätts också ihop till enhetliga glyfer: === och !==, :: och //, |||. Kommentarer som <!-- --> ser prydligare ut. För funktionell programmeringsentusiaster finns |> och >>= med =<<, och dussintals fler.

Nedan är samma PHP-kod utan Fira Code och med det. Skillnaden är inte dramatisk, men försök "hitta skillnaderna": ditt öga fångar operatorer snabbare.

Utan Fira Code

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);

Med Fira Code

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);

Båda blocken är identiska tecken för tecken. Endast typsnittet skiljer sig. I det andra fallet blev <= och >= enhetliga tecken, != och !== ser överstrukna ut, och --> förvandlades till en pil. Läsningen går snabbare, inte radikalt, men märkbart. Särskilt under långa kodgranskningssessioner.

Var Fira Code fungerar

Typsnittet stöds av dussintals editorer: från VS Code och Sublime Text till Vim och Emacs. Den fullständiga listan finns i kompatibilitetstabellen på GitHub.

Viktiga plattformar:

  • VS Code: inbyggt stöd. I settings.json, lägg till "editor.fontFamily": "'Fira Code'", "editor.fontLigatures": true. Stilistiska set aktiveras via "editor.fontLigatures": "'calt', 'ss02', 'ss09'".

  • JetBrains IDE (IntelliJ, PhpStorm, WebStorm, Rider): sedan version 2016.2. Inställning: Editor → Font → välj Fira Code → aktivera Enable ligatures.

  • Sublime Text: från och med build 3146. I användarinställningar: "font_face": "Fira Code".

  • Vim/Neovim: via set guiligatures i GUI-versioner och patchar för terminalversioner.

  • Terminaler: Windows Terminal, iTerm 2, Kitty, Konsole, Tabby, Hyper, WezTerm. Stöds inte: Alacritty, GNOME Terminal, xterm, PuTTY.

  • Webbläsare: via jsdelivr CDN. Inkludera <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/distr/fira_code.css"> och lägg till font-feature-settings: "calt"; för IE/äldre Edge.

I praktiken ser installationen ut så här: ladda ner ZIP-filen från releasen, installera TTF-filen på ditt system, ställ in typsnittet i din editor, aktivera ligaturer. Det är allt. Inga plugins, ingen magi, bara ren @font-face på OS-nivå.

Finjustering: varianter och stilistiska set

Den främsta fördelen med Fira Code jämfört med konkurrenterna är flexibilitet. Gillar du inte en specifik ligatur? Stäng av den. Vill du ha en annan bokstavsform? Välj en teckenvariant. Allt är anpassningsbart på detaljnivå.

Teckenvariationer (cv01-cv31) ändrar formen på enskilda tecken:

  • cv01-cv10: alternativa utformningar för bokstäverna a och g, samt i och l
  • cv11-cv13: nollvarianter (med punkt, utan, genomstruken)
  • cv14: alternativ trea
  • cv15: asterisk justerad i topp (praktiskt för C/C++-pekare)
  • cv31: alternativa parenteser ()

Stilistiska set (ss01-ss10) styr ligaturer:

  • ss01: alternativ rendering av &&
  • ss02: <= utan lutning, med horisontellt streck
  • ss03: & i skrivmaskinsstil
  • ss04: dollar $ utan snedstreck
  • ss05: @ utan snirklig svans
  • ss09: återställer separata >>= / <<= / ||= (borttagna från standard i v6, detaljer på GitHub)

Förloppsindikatorer förtjänar särskilt omnämnande. Fira Code är det första programmeringstypsnittet där tecknen U+EE00-U+EE0B renderas som en förloppsindikatorremsa. Terminalen matar ut en sekvens ``, och användaren ser en snygg fyllnad. För att upptäcka stöd har en miljövariabel UNICODE_PROGRESS_BAR=true föreslagits.

Alternativ: vad man kan jämföra med

Fira Code är inte det enda typsnittet med ligaturer. Marknaden har vuxit de senaste åren, och varje alternativ har sitt eget fokus:

Typsnitt

Licens

Egenskap

JetBrains Mono

SIL OFL

Förbättrad läsbarhet, varierad gemenhöjd, ingen avrundning

Cascadia Code

SIL OFL

Microsofts typsnitt för Terminal, Powerline-stöd, boxritning

Iosevka

SIL OFL

Smalt typsnitt, kodgenererat, maximalt kompakt

Victor Mono

MIT

Äkta kursiv med seriffer, inte bara lutande

Hasklig

SIL OFL

Source Code Pro-fork med ligaturer för Haskell

Monoid

MIT

Powerline-stöd, anpassningsbar bredd

Fira Code vinner inte på grund av skönheten hos enskilda bokstäver (det är subjektivt), utan på grund av sin omfattning och mognad. 81 000 stjärnor på GitHub, sex större releaser, hundratals editorer som stöds, 31 teckenvariationer, förloppsindikatorer, matematiska symboler, boxritning och Powerline-stöd. När du väljer ett typsnitt för många år framöver spelar ekosystemet lika stor roll som estetiken.

⁉️🤔 Vanliga frågor

Jag installerade Fira Code, men ligaturerna dök inte upp. Vad är fel?

Troligtvis kräver din editor separat aktivering. I VS Code är det "editor.fontLigatures": true. I JetBrains IDE: kryssa i "Enable ligatures" i typsnittsinställningarna. I terminaler, kontrollera om din emulator stöder ligaturer: Windows Terminal gör det, ConEmu gör det inte.

Ligaturer är distraherande. Kan jag bara behålla vissa?

Ja. Stilistiska set ss01-ss10 aktiverar och inaktiverar ligaturgrupper. Till exempel återställer ss09 separata >>= och <<=. För detaljerad anpassning kan du bygga om typsnittet lokalt med ./script/build.sh --features "ss02,ss08,cv14".

Fira Code är långsamt i min editor. Är detta normalt?

Version 4 inkluderade en renderingsoptimering: 44 separata pilligaturer ersattes med fyra kombinatoriska regler, vilket förbättrade prestandan med 100-150%. Om det är långsamt nu, kontrollera om andra typsnittsfunktioner är aktiverade samtidigt (calt plus ss-set orsakar vanligtvis inga fördröjningar).

Hur är det kyrilliska stödet i Fira Code?

Den kyrilliska uppsättningen ärvs från Fira Mono: läsbar, neutral, anspråkslös. Den räcker för kod på ryska (kommentarer, strängar). Men om du skriver omfattande dokumentation på ryska, överväg JetBrains Mono: dess kyrilliska är bättre utvecklad.

Är det värt att byta till Fira Code 2026

Typsnittet har inte uppdaterats sedan december 2021. Och detta är, märkligt nog, ett gott tecken. När en produkt når tillståndet "fungerar och går inte sönder" behövs inte frekventa commits. På fem år utan releaser har ingen skrivit "Fira Code är dött." Folk bara använder det.

Om du kodar 4+ timmar om dagen, installera Fira Code i en vecka. Du kommer att känna återgången till ditt gamla typsnitt snabbare än du förväntar dig: ditt öga vänjer sig vid att läsa operatorer som enhetliga enheter, och att återgå till "isärplockade" tecken känns som ett steg bakåt. Det värsta som kan hända: du tar bort typsnittet efter sju dagar. Det bästa: du hittar ditt verktyg för många år framöver.