À l'aide de Google Polices SVG <object>
Je suis intégration SVGs dans ma page avec la <object>
tag, et ils sont censés utiliser Google Polices (par exemple Roboto). Cependant, la SVGs ne sont pas à la cueillette de ces polices et de la place par défaut pour les polices système.
Ce que je fais mal? Est-ce que chaque SVG exiger que la police elle-même être intégré dans <style>
?
Exemple de code:
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
</head>
<body>
<object width="250" height="200" type="image/svg+xml" data="img/popup_image.svg"></object>
</body>
SVG extrait de:
<text font-size="14" fill="#333" font-family="Roboto">Words go here</text>
- Comment est-ce que votre code ressemble?
- Je ne suis pas sûr de comprendre ta question. Comme je l'ai dit, c'est à l'aide de la balise d'objet pour montrer un SVG, et que SVG est le référencement Google Fonts pour son <texte> attributs. Je vais mettre à jour ma question ci-dessus dans le cas où je ne suis pas clair.
- Non cela ne fonctionne pas....c'est comme essayer de changer la police de caractères dans un image avec le CSS...ne va pas arriver. Si le SVG a été inline il serait probablement bien.
- Vous avez besoin de mettre le lien de l'élément dans le même fichier que le svg je.e dans popup_image.svg
- Pouvez-vous fournir un lien ou un exemple de ce travail?
- Ce qui est déroutant vous mettre la
<link>
élément dans le fichier SVG. - Je suppose que où et comment exactement. Dans un
<defs></defs>
? À l'intérieur d'un<style>
? Il suffit de regarder pour un exemple de la syntaxe correcte, parce que c'est renvoyer des erreurs à ne pas faire les deux de ces choses. - Vous pouvez le mettre n'importe où vous le souhaitez.
- C'est tout simplement faux.
- Vraiment!?: Essayez de lire cette w3c discussion
Vous devez vous connecter pour publier un commentaire.
Le navigateur traite SVG texte régulière de texte HTML. En d'autres termes, tous les éléments de texte dans votre SVG doit être de style comme d'habitude les éléments HTML (comme un
<span>
, par exemple). Vous avez besoin d'incorporer les polices dans votre SVG sous la forme d'un CSS@import
. Regardez à travers le XML de votre SVG pour le<defs>
section. Ensuite, ajoutez ce code:Ensuite, mettez à jour votre
<text>
élément à être comme ceci:Si vous souhaitez plus d'informations à ce sujet, vous pouvez essayer ce site: http://nimbupani.com/about-fonts-in-svg.html. Il a d'assez bonnes informations sur les polices incorporées SVGs. Un exemple de ceci peut être trouvé ici: https://github.com/marians/test-webfonts-in-svg.
@import url:()
semble être au travail... encore en test mais.CDATA
nécessaire. Utilisez simplement:@import url('https://fonts.googleapis.com/css?family=Sonsie+One');
. Un exemple de travail de comparaison peut être trouvé ici: github.com/marians/test-webfonts-in-svgQuelques suggestions si vous voulez faire de votre logo portable et disponible hors connexion, vous devriez consommer et intégrer la version la plus petite de votre police de caractères possible.
D'abord, optimiser la taille de la police, en ne tirant dans la course poids et les personnages que vous avez réellement besoin.
Ainsi, au lieu de cela:
Condenser les options et aussi ajouter le
?text=abc
param à seulement saisir un sous-ensemble de glyphes comme ceci:À l'intérieur de votre svg, vous pouvez inclure un
@font-face
déclaration dans une feuille de style dans le<defs>
balise comme ceci:Prends le fichier en accédant à google polices de la feuille de style et le téléchargement du réel .woff2 fichier. Vous pouvez convertir en un b64 chaîne à l'aide de base64-codeur ou en lire plus à La conversion et le rendu des polices web pour en base64. Prendre cette chaîne et de l'inclure dans votre fichier. Juste pour clarifier, vous pouvez aussi spécifier la unicode gamme sur le type de police pour rendre explicite le fait que vous êtes seulement en tirant dans certains caractères
HTML:
Voir Aussi: