J'utilise la boussole ' J'utilise des URL relatives pour l'EOT (DUE à l'absence de prise en charge de l'URI de données) et pour les fichiers SVG (en raison du hachage #FontName, je suppose). Le fichier EOT ne pose aucun problème car il existe un paramètre pour cela, mais parce que existe un moyen de faire La chose est que je ne peux pas comprendre Sur la manière de faire des versions Woff, OTF et TTF Utilisez l'URI de données tout en permettant à la version SVG d'utiliser une URL standard. Le mieux que je suis arrivé est celui-ci: qui brisera le SVG dans sa propre face-face. Est-ce que cela est valide CSS sur le même compte que je peux créer plusieurs règles de Font-face avec le même nom de famille utilisant des poids et des styles différents? Si tel est le cas, cela fonctionnera-t-il aussi bien que l'exemple CSS ci-dessus (il semble)? Et bien sûr, y a-t-il une meilleure façon d'accomplir cela dans Compass / Sass? Font-face Mixin avec le Fichiers en ligne-Font-Files et FICHIES Pour créer quelque chose dans les lignes du La nouvelle syntaxe de polices @ font-face en utilisant URIS de données pour les fichiers Woff, TTF et OTF. Font-face dans Compass Treats SVG NO différent des autres formats, je ne peux tout simplement pas utiliser FILE-FONT-FILES Pour inclure les données de police, car cela rendrait également la version SVG en ligne. font-face renvoyer quelque chose comme ci-dessous:
3 Réponses :
Pour les personnes intéressées, la solution mentionnée dans la question semble bien fonctionner. Il est probablement une bonne idée de déplacer l'attribut de fichier EOT de la règle de données URI @ font-face à celle à l'aide d'une URL standard () . Il semble parfois que les données: générées de l'URL sont trop longues, ce qui brise toute la règle de la police. En outre, assurez-vous que la règle de données URI est chargée en dernier, car Firefox 5 et UP semble charger uniquement la dernière règle rencontrée. Par conséquent, gardez les polices en ligne (Woff, TTF, OTF) dans la dernière règle et les polices liées (SVG, EOT) dans la première, comme:
mise à jour. En fait, j'ai utilisé un grand petit mixin du site de la mixine de Bourbon:
// Bourbon Mixin for top notch webfont support: https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_font-face.scss
@mixin font-face($font-family, $file-path, $weight: normal, $style: normal ) {
@font-face {
font-family: $font-family;
src: url('#{$file-path}.eot');
src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
url('#{$file-path}.woff') format('woff'),
url('#{$file-path}.ttf') format('truetype'),
url('#{$file-path}.svg##{$font-family}') format('svg');
font-weight: $weight;
font-style: $style;
}
}
// Bourbon Mixin webfont setup: http://thoughtbot.com/bourbon/#font-face
@include font-face(ProximaNova, 'fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont');
@include font-face(ProximaNova, 'fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont', bold);
@include font-face(ProximaNova, 'fonts/proximanova_semibolditalic_macroman/ProximaNova-SboldIt-webfont', normal, italic);
Il manque de style / de poids et de données URI: s Les polices à droite? Mais c'est probablement assez facile à ajouter. Bonne trouvaille!
Ce mixin convient très bien mes besoins en matière de données URI: s pour certains formats et chargement HTTP des autres:
@mixin fontspring-font-face($family, $file, $svg_hash: $file, $weight: false, $style: false) {
@font-face {
font-family: quote($family);
src: font-files("#{$file}.eot");
src: font-files("#{$file}.eot?#iefix") format('eot'), inline-font-files("#{$file}.woff", woff, "#{$file}.ttf", truetype), font-files("#{$file}.svg##{$svg_hash}") format('svg');
@if $weight {
font-weight: $weight;
}
@if $style {
font-style: $style;
}
}
}