web-dev-qa-db-fra.com

Conversion et rendu des polices Web en base64 - conservez l'aspect d'origine

Je souhaite différer le chargement des polices sur mon site en m'inspirant de logique de chargement des polices différée pour Smashing Magazine .

La partie principale de ceci est la conversion des polices en base64 et la préparation de votre fichier CSS. Mes étapes jusqu'à présent:

  1. Choisissez des polices sur Google Web Fonts et téléchargez-les.
  2. Utilisez Font Squirrel Webfont Generator pour convertir les fichiers TTF téléchargés en fichier CSS avec des polices WOFF incorporées en base64 (Options expert -> CSS -> Encodage Base64).
  3. Charger le fichier CSS asynchrone (pas important ici).

Extrait CSS pour Open Sans Bold:

@font-face {
  font-family: 'Open Sans';
  src: url(data:application/x-font-woff;charset=utf-8;base64,<base64_encoded>) format('woff');
  font-weight: 700;
  font-style: normal;
}

Le problème est , les polices converties sont très différentes . Jetez un œil à Open Sans Bold: GWF vs base64 rendering comparison

Surtout remarquez que les accents sont loin et la lettre absolument horrible a. Les autres familles et variantes de polices sont également très différentes (distorsions de taille et de forme, etc.).

La question est donc: Comment encodez-vous correctement les fichiers TTF de Google Web Fonts (ou d'une autre source) au format base64 et l'utilisez-vous de manière à ce que le résultat soit identique au fichier d'origine?

cssfontsbase64webfontsgoogle-webfonts
38
smajl

Dans les options de Font Squirrel Expert, assurez-vous de définir l'option "TrueType Hinting" sur "Keep Existing". L'une ou l'autre des options entraînera la modification des instructions TrueType (astuces), ce qui affectera à son tour le rendu de la police.

Alternativement, si vous êtes satisfait du rendu de la police directement depuis GWF, vous pouvez simplement prendre ce fichier et faire l'encodage base64 vous-même. Sous OS X ou Linux, utilisez la commande base64 intégrée dans Terminal/Shell:

$ base64 myfont.ttf > fontbase64.txt

Pour Windows, vous devrez télécharger un programme pour encoder en base64 (plusieurs outils gratuits/Open Source sont disponibles). Copiez le contenu de ce fichier, puis utilisez-le dans votre CSS comme:

@font-face {
    font-family: 'myfont';
    src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
    font-weight: normal;
    font-style: normal;
}

(Notez que vous devrez peut-être apporter certains ajustements aux diverses informations @ font-face pour qu'elles correspondent à vos données de police particulières; ce n'est qu'un exemple de modèle)

58
djangodude