Jūs žinote, kad sukūrėte svetainę, reikia turėti keletą šriftų formatų, siekiant užtikrinti suderinamumą ir optimizuoti performanses. WOFF ir WOFF2 yra šiuo metu internetinių šriftų standartai – jie gana kompaktūri ir palaikomi mūsų esamiems narėjimams.
Šiame straipsnyje apibūdinys, kaip konvertuoti TTF (TrueTypeFont) failus į WOFF arba WOFF2 naudodami woff-tools Debian 13 Linux sistemoje.
1. Woff-tools įdiegimas
Debian 13 teikia woff-tools oficialiems paketų šaltiniais. Jį galite įdiegti atidarydami terminalą ir vykdydami šią komandą:
|
# Mise à jour des paquets disponibles |
|
sudo apt update |
|
# Installation de woff-tools |
|
sudo apt install woff-tools |
|
# Installation de woff2 |
|
sudo apt install woff2 |
Tada turėsite prieigą prie sfnt2woff ir woff2_compress, kurie leis jums konvertuoti TTF failus.
2. Konvertuoti TTF į WOFF
Woff-tools įdiegę, galite naudotis šia komanda, kad konvertuotumėte savo TTF šriftus į WOFF:
#TTF 2 WOFF |
sfnt2woff votrepolice.ttf |
Tada turėsite failą jūsųpolis.woff toje pačioje aplinkoje.
3. Konvertuoti TTF į WOFF2
Woff2 formatas yra dar griežtesnis, ir jis rekomenduojamas moderniems narėjimams. Galite naudotis šia komanda konvertuodami savo TTF į WOFF2:
#TTF 2 WOFF2 |
woff2_compress votrepolice.ttf |
4. Konvertuoti kelias failus viena komandą
Kai kuriais atvejais, kaip mano atveju, turėsite keletą TTF failų šriftų aplinkoje, nes turite šio šrifto daugybę versijų.
Bash skriptas bus labai praktiškas šiai užduotėjai. Įrašykite šį turinį į failą convert_fonts.sh, kur norite vykdyti konvertavimą:
#!/bin/bash |
|
# Convertir tous les fichiers TTF en WOFF |
for f in *.ttf; do |
sfnt2woff "$f" |
done |
|
# Convertir tous les fichiers TTF en WOFF2 |
for f in *.ttf; do |
woff2_compress "$f" |
done |
|
echo "Conversion terminée !" |
|
|
# Convertir tous les fichiers TTF en WOFF |
for f in *.ttf; do |
sfnt2woff "$f" |
done |
|
# Convertir tous les fichiers TTF en WOFF2 |
for f in *.ttf; do |
woff2_compress "$f" |
done |
|
echo "Conversion terminée !" |
|
# Convertir tous les fichiers TTF en WOFF |
for f in *.ttf; do |
sfnt2woff "$f" |
done |
|
# Convertir tous les fichiers TTF en WOFF2 |
for f in *.ttf; do |
woff2_compress "$f" |
done |
|
echo "Conversion terminée !" |
|
Dėmesingai suteikite šiam faile vykdymo leidimus:
chmod +x convert_fonts.sh |
Tada paleiskite jį:
./convert_fonts.sh |
5. Patikrinti failų kompresiją
Galite greitai sujungti šriftų dydžius:
ls -lhS *.* |
6. Naudojimas konvertuotais šriftais
Kur kuriate svetainę, galite naudoti šią techniką @font-face naudojant savo konvertuotas šriftus:
@font-face { |
font-family: 'VotrePolice'; |
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; |
} |
O jų naudojimui pavyksta taip, kaip pavyzdžiui:
/* Applique la police à tous les éléments avec la classe "texte" */ |
.texte { |
font-family: 'VotrePolice', sans-serif; /* Utilise la police personnalisée */ |
} |
|
/* Applique un style aux balises <p> */ |
p { |
font-family: 'VotrePolice', sans-serif; /* Utilise la police personnalisée */ |
font-size: 16px; /* Exemple de taille de police */ |
color: #333; /* Couleur du texte */ |
line-height: 1.5; /* Espacement entre les lignes */ |
} |
|
/* Styles pour un élément avec l'id "texte-footer" */ |
#texte-footer { |
font-family: 'VotrePolice', sans-serif; /* Utilise la police personnalisée */ |
font-size: 14px; |
color: #666; /* Couleur plus claire pour le pied de page */ |
text-align: center; /* Centre le texte */ |
padding: 20px 0; |
} |
|
7. Pastabos
Tai yra tikrai paprasta ir visiškai nemokama, ačiū atvirose srityse kūrimo įrankiams.
Pritariame naudoti formatą WOFF2, nes jis geriausiai suderinamas su moderniais narėjimais.
Komentarai
Kol kas nėra patvirtintų komentarų.
Prisijunkite su komentuotojo paskyra, kad galėtumėte komentuoti. Prisijungti.