Ich habe mit Inkscape ein benutzerdefiniertes Facebook-Symbol erstellt und es als SVG gespeichert. Es verwendet die gleiche Schriftart wie der Titel meiner Seite, die die Schriftart „ubuntutitling-bold-webfont“ verwendet, die ich als .woff in einer CSS-Datei referenziert habe. Der Titel funktioniert, aber das SVG nicht - es zeigt das "f" in einer Art Standardschriftart an. Die Schriftdatei befindet sich relativ zur CSS- und Bilddatei unter ../fonts/ubuntutitling-bold-webfont.woff und relativ zur Webseite unter fonts/ubuntutitling-bold-webfont.woff.
I fount Wie bette ich Google Web Fonts in ein SVG ein? , aber ich bin etwas verwirrt darüber, wie ich den Code auf die SVG anwenden soll, wenn ich das überhaupt muss. Kann das SVG die .woff-Schriftart verwenden, auf die in der CSS-Datei verwiesen wird? War die Art und Weise, wie ich die Schriftart in der SVG-Datei manuell geändert habe, korrekt?
Hier ist der Code für das 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.
Sie müssen CSS in den defsAbschnitt einfügen. Etwas wie:
<defs>
<style type="text/css">
@font-face {
font-family: Delicious;
src: url('../fonts/font.woff');
}
</style>
</defs>
<object>das SVG anstelle von einbetten <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 überprüft hatte , entschied ich mich, das SVG-Markup direkt in mein Dokument einzubetten.Um Google oder andere externe Fornts in die SVG-Datei zu laden, müssen wir das style-Tag wie folgt in das defs-Tag einfügen:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="246" height="272" xml:space="preserve"><desc>Your description</desc>
<defs>
<style type="text/css">@import url('http://fonts.googleapis.com/css?family=Lobster|Fontdiner+Swanky|Crafty+Girls|Pacifico|Satisfy|Gloria+Hallelujah|Bangers|Audiowide|Sacramento');</style>
</defs>
Bearbeiten: Ich habe Ihre Frage noch einmal gelesen ... es scheint, als wäre Ihre beste Option, den Text in Ihrem Symbol in eine Gliederung umzuwandeln, sodass die Schriftart überhaupt nicht benötigt wird. (Möglicherweise müssen Sie Ihre Schriftartlizenz überprüfen, um festzustellen, ob dies in Ordnung ist.)
Ich bin fälschlicherweise davon ausgegangen, dass Sie ein Vektorsymbol haben und nach der besten Möglichkeit suchen, es auf Ihrer Website anzuzeigen.
Ich denke, Sie haben ein paar Möglichkeiten.
Sie könnten das SVG einfach als Bild selbst verwenden. Sie werden die Unterstützung für ältere Versionen von IE verlieren, aber Sie könnten ein PNG oder GIF für IE8 und früher eintauschen. Oder kümmern Sie sich nicht um die Unterstützung für IE8 und ältere Versionen (kann eine Option sein oder auch nicht, abhängig von Ihrer Zielgruppe).
Font Squirrel hat einen @font-face-Generator, der die ganze Arbeit für Sie erledigt, wenn Sie die Schriftart bereits erstellt haben.
Font Squirrel @font-face-Generator
Warum verwendest du SVG? Ist es für einen besseren Zoom und eine 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, Symbole in Schriftarten einzubetten. Sie verlieren die Kontrolle über die Pixelebene. Es gibt ein paar Situationen, in denen dies eine gute Wahl ist, aber oft ist es viel mehr Aufwand wert und führt zu schlechteren Ergebnissen.
<defs>
<style type="text/css">
<![CDATA[
@font-face {
font-family: 'Fredoka One';
font-style: normal;
font-weight: 400;
src: local('Fredoka One'), local('FredokaOne-Regular'),
url(https://fonts.gstatic.com/s/fredokaone/v7/k3kUo8kEI-
tA1RRcTZGmTlHGCac.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
]]>
</style>
</defs>
Das ist ein Beispiel für die folgende Schriftart: https://fonts.googleapis.com/css?family=Fredoka%20One Öffnen Sie die Schriftartenseite und kopieren Sie alles in „defs“.
Ideogramm