web-dev-qa-db-fra.com

Ajout de polices à l’administrateur des installations antérieures à 3.8

J'ai commencé à utiliser les polices dashicon dans la page des options de thème pour WP 3.8 utilisateurs ou plus. Pour prendre en charge les utilisateurs sur <3.8, j'ai ajouté les polices dashicon à mon dossier de thème ainsi qu'une entrée en haut de ma feuille de style d'administrateur personnalisée:

@font-face {
    font-family: 'dashicons';
    src: url('fonts/dashicons.eot');
}

@font-face {
        font-family: 'dashicons';
        src: url(data:application/x-font-woff;charset=utf-8;base64,xxx) format('woff'),
        url('fonts/dashicons.ttf') format('truetype'),
        url('fonts/dashicons.svg#dashicons') format('svg');
    font-weight: normal;
    font-style: normal;
}

(J'ai omis l'encodage base64 par souci de brièveté)

Cela fonctionne très bien, cependant, je suis un peu étrange avec les polices. Lorsque je laisse l'administrateur ouvert dans un onglet et que je m'en vais un peu, puis que je reviens, de temps en temps, les contrôleurs web se sont tournés vers des carrés, comme si la police était manquante.

Cela n'arrive pas à chaque fois. Cela semble être quelque peu aléatoire.

Dans ces cas, le simple fait de déplacer la souris sur la page ramène généralement les polices Web à leurs propres symboles.

Les captures d'écran ci-dessous montrent le problème. La première capture d'écran est ce que je vois quand le problème se produit. La deuxième capture d'écran est ce que je m'attends à voir lorsque les choses vont bien.

Remarquez dans le premier plan, comment les étiquettes wordpress sont passées à une police par défaut.

Here's what it looks like gone bad

Here's what it SHOULD look like

theme-developmentcss
1
N2Mystic

Cela se produit parfois lorsque la police est envoyée avec un type MIME incorrect. application/x-font-woff par exemple, est faux . Essayez d’ajouter les types MIME appropriés à la configuration de votre serveur. Dans Apache, vous pouvez le faire dans un .htaccess:

AddType image/svg+xml                 .svg
AddType application/x-font-ttf        .ttf
AddType application/x-font-opentype   .otf
AddType application/vnd.ms-fontobject .eot
AddType application/font-woff         .woff

Vous devez ajouter des instructions pour le thème aux utilisateurs, car un thème ne doit pas toucher aux fichiers de configuration du serveur.

4
fuxia