Ich habe mit Inkscape ein benutzerdefiniertes Facebook-Symbol erstellt und es als SVG gespeichert. Es wird dieselbe Schriftart wie der Titel meiner Seite verwendet, die die Schriftart "Ubuntutitling-Bold-Webfont" verwendet, auf die ich in einer CSS-Datei als .woff verwiesen habe. Der Titel funktioniert, das SVG jedoch nicht - es zeigt das "f" in einer Art Standardschrift an. Die Schriftartendatei befindet sich in Relativität zur CSS- und Bilddatei unter ../fonts/ubuntutitling-bold-webfont.woff und in Relativität zur Webseite unter fonts / ubuntutitling-bold-webfont.woff.
I fount Wie binde ich Google Web Fonts in eine SVG ein? , aber ich bin ein bisschen verwirrt darüber, wie ich den Code auf die SVG anwenden soll, wenn ich es überhaupt brauche. Kann die SVG die in der CSS-Datei angegebene .woff-Schriftart verwenden? War die Art und Weise, wie ich die Schriftart in der SVG-Datei manuell geändert habe, korrekt?
Hier ist der Code für die SVG:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="80"
height="80"
id="svg2"
version="1.1"
inkscape:version="0.48.3.1 r9886"
sodipodi:docname="New document 1">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="26.573808"
inkscape:cy="42.478414"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1619"
inkscape:window-height="611"
inkscape:window-x="165"
inkscape:window-y="301"
inkscape:window-maximized="0" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0.75006053,-981.36219)">
<rect
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
id="rect2987"
width="70"
height="70"
x="4.2499394"
y="986.36218"
rx="10"
ry="10" />
<text
xml:space="preserve"
style="font-size:109.44319916px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:#fffffe;stroke-width:2.73607969;stroke-opacity:1;font-family:ubuntutitling-bold-webfont';-inkscape-font-specification:ubuntutitling-bold-webfont'"
x="25.989071"
y="1096.0118"
id="text3757"
sodipodi:linespacing="125%"
transform="scale(1.0381556,0.96324674)"><tspan
sodipodi:role="line"
id="tspan3759"
x="25.989071"
y="1096.0118"
style="stroke-width:2.73607969">f</tspan></text>
</g>
</svg>
Danke im Voraus.
Antworten:
Sie müssen CSS in den
defs
Abschnitt einfügen. So etwas wie:quelle
<object>
zum Einbetten von svg verwenden,<img>
wird die Schriftart ordnungsgemäß geladen! github.com/marians/test-webfonts-in-svg/pull/1<object>
hat einige Nachteile. Nachdem ich vecta.io/blog/best-way-to-embed-svg durchgesehen hatte, entschied ich mich, das svg-Markup direkt in mein Dokument einzufügen .Um Google oder andere externe Fornts in die SVG-Datei zu laden, müssen Sie das style-Tag wie folgt in das defs-Tag einfügen:
quelle
Bearbeiten: Ich habe Ihre Frage noch einmal gelesen ... Ihre beste Möglichkeit scheint es zu sein, den Text in Ihrem Symbol in eine Gliederung umzuwandeln, sodass die Schriftart überhaupt nicht benötigt wird. (Möglicherweise müssen Sie Ihre Zeichensatzlizenz überprüfen, um festzustellen, ob dies in Ordnung ist.)
Ich habe fälschlicherweise angenommen, dass Sie ein Vektorsymbol hatten und nach der besten Möglichkeit suchten, es auf Ihrer Website anzuzeigen.
Ich denke, Sie haben ein paar Möglichkeiten.
Verwenden Sie ein SVG-Bild
Sie können die SVG-Datei auch als Bild verwenden. Sie verlieren die Unterstützung für ältere IE-Versionen, können jedoch PNG- oder GIF-Dateien für IE8 und frühere Versionen austauschen. Oder kümmern Sie sich nicht um die Unterstützung von IE8 und älteren Versionen (kann je nach Zielgruppe eine Option sein oder auch nicht).
Verwenden Sie den Generator von Font Squirrel
Font Squirrel verfügt über einen @ font-face-Generator, der alles für Sie erledigt, wenn Sie die Schriftart bereits erstellt haben.
Font Squirrel @ Font-Face-Generator
Verwenden Sie ein PNG-Bild
Warum benutzt du SVG? Ist es für besseren Zoom und hohe DPI-Unterstützung? Wenn ja, gibt es Möglichkeiten, dies mit CSS und PNGs zu tun. Es hängt wirklich von Ihrem Verwendungszweck ab.
Ich bin kein Fan davon, Icons in Schriften einzubetten. Sie verlieren die Kontrolle über die Pixelebene. Es gibt einige Situationen, in denen dies eine gute Wahl ist, aber oft ist es viel mehr Aufwand, der sich lohnt und schlechtere Ergebnisse liefert.
quelle
Das ist ein Beispiel für die folgende Schriftart. https://fonts.googleapis.com/css?family=Fredoka One Open Besuchen Sie die Schriftseite und kopieren Sie alles in "defs"
quelle