Du vet sikkert at når du utvikler en nettside, du må ha flere filformater for å garantere kompatibilitet og optimere ytelsen. WOFF og WOFF2 er i dagens standard for webfonter, de er mye komprimerte og støttet av våre moderne nettlesere.
I denne artikkelen vil jeg forklare hvordan du kan konvertere TTF-filer (TrueTypeFont) til WOFF eller WOFF2 med woff-tools under Linux Debian 13.
1. Installasjon av woff-tools
Debian 13 har woff-tools direkte i ofisielle depotene. For å installere, åpner du et terminalvindu og kjører:
|
# Oppdater tilgjengelige pakker |
|
sudo apt update |
|
# Installation de woff-tools |
|
sudo apt install woff-tools |
|
# Installation de woff2 |
|
sudo apt install woff2 |
Du vil da få tilgang til sfnt2woff og woff2_compress, som lar deg konvertere dine TTF-filer.
2. Konverter en TTF-fil til WOFF
Når du har installert woff-tools, kan du bruke følgende kommando for å konvertere ditt fonter fra TTF til WOFF:
#TTF 2 WOFF |
sfnt2woff votrepolice.ttf |
Du vil da få et filnavn som yourpolice.woff i samme mappe.
3. Konverter en TTF-fil til WOFF2
Formatet WOFF2 er enda mer komprimert og anbefales for moderne nettlesere. Du kan bruke denne kommandoen for å konvertere din TTF-fil til WOFF2:
#TTF 2 WOFF2 |
woff2_compress votrepolice.ttf |
4. Konverter flere filer med en enkelt kommando
Ofte, som i mitt tilfelle, har du flere TTF-filer i fontermappen din, fordi du har flere versjoner av det samme fonteret.
En bash-skript vil være veldig praktisk her. Lagre følgende innhold i filen convert_fonts.sh der du trenger å utføre en konvertering:
#!/bin/bash |
|
# Konverter alle TTF-filer til WOFF |
for f in *.ttf; do |
sfnt2woff "$f" |
done |
|
# Konverter alle TTF-filer til WOFF2 |
for f in *.ttf; do |
woff2_compress "$f" |
done |
|
echo "Conversion terminée !" |
|
|
# Konverter alle TTF-filer til WOFF |
for f in *.ttf; do |
sfnt2woff "$f" |
done |
|
# Konverter alle TTF-filer til WOFF2 |
for f in *.ttf; do |
woff2_compress "$f" |
done |
|
echo "Conversion terminée !" |
|
# Konverter alle TTF-filer til WOFF |
for f in *.ttf; do |
sfnt2woff "$f" |
done |
|
# Konverter alle TTF-filer til WOFF2 |
for f in *.ttf; do |
woff2_compress "$f" |
done |
|
echo "Conversion terminée !" |
|
Gi denne fila kjørefeilighetene:
chmod +x convert_fonts.sh |
Deretter, kjør den:
./convert_fonts.sh |
5. Sjekk komprimeringen av filene
Du kan lett sammenligne størrelsen på de ulike skriftene:
ls -lhS *.* |
6. Bruke dine konverterte skrifter
Når du har konvertert skriftene, brukes dette for å bruke din skrift via @font-face:
@font-face { |
font-family: 'DinFont'; |
src: url('fonts/votrepolice.woff2') format('woff2'), |
url('fonts/votrepolice.woff') format('woff'), |
url('fonts/votrepolice.ttf') format('truetype'); /* Ajout du TTF */ |
font-weight: normal; |
font-style: normal; |
} |
Og for å bruke den kan du for eksempel gjøre:
/* Bruk skriften på alle elementer med klassen "texte" */ |
.texte { |
font-family: 'DinFont', sans-serif; /* Bruk den egendefinerte skriften */ |
} |
|
/* Stil for <p>-elementer */ |
p { |
font-family: 'DinFont', sans-serif; /* Bruk den egendefinerte skriften */ |
font-size: 16px; /* Exemple de taille de police */ |
color: #333; /* Tekstfarge */ |
line-height: 1.5; /* Linjeavstand */ |
} |
|
/* Stiler for elementet med id "texte-footer" */ |
#texte-footer { |
font-family: 'DinFont', sans-serif; /* Bruk den egendefinerte skriften */ |
font-size: 14px; |
color: #666; /* Lysere farge for bunnteksten */ |
text-align: center; /* Centre le texte */ |
padding: 20px 0; |
} |
|
7. Merknader
Det er faktisk veldig enkelt og helt gratis, takket være de åpne kildekodeløsningene igjen.
Påminn deg om å foretrekke formatet WOFF2, det passer best til moderne nettlesere.
Kommentarer
Ingen godkjente kommentarer ennå.
Logg inn med en kommentatorkonto for å publisere en kommentar. Logg inn.