Verwendung von Google Fonts mit SVG <object>

Ich bin Einbettung von SVGs in meine Seite mit der <object> tag, und Sie sollten nutzen Sie Google Schriftarten (z.B. Roboto). Jedoch, die SVGs sind nicht Kommissionierung diese Schriften und statt Standard-system-fonts.

Was mache ich falsch? Nicht jedes SVG verlangen, dass die Schrift selbst eingebettet werden in <style>?

Beispiel-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-snippet:

<text font-size="14" fill="#333" font-family="Roboto">Words go here</text>

Wie sieht dein code Aussehen?
Ich bin mir nicht sicher, ob ich verstehe Ihre Frage. Wie ich schon sagte, ist es mit dem object-tag, um zu zeigen, SVG, und dass die SVG auf Google Fonts für seinen <text> Attribute. Ich werde aktualisieren, meine Frage oben, falls ich mich nicht klar ist.
Nein, das wird nicht funktionieren....es ist wie der Versuch, ändern Sie die schriftart in einem Bild mit CSS...wird nicht passieren. Wenn der SVG war inline-es würde wahrscheinlich obwohl.
Sie müssen das link-element in der gleichen Datei wie die svg-ich.e in popup_image.svg
Können Sie uns einen link oder ein Beispiel für diese Arbeit?
Was ist verwirrend Sie darum, die <link> element in die SVG-Datei.
Ich denke, wo und wie genau. In einem <defs></defs>? Innerhalb einer <style>? Suche gerade nach einem Beispiel für die richtige syntax, weil es wirft Fehler, tun diese beiden Dinge.
Sie können es überall Sie mögen.
Das ist einfach falsch.
Wirklich!?: Lesen Sie diese w3c-Diskussion

InformationsquelleAutor daveycroqet | 2016-03-27

19

Browser behandelt SVG-text als normale HTML-text. In anderen Worten, alle text-Elemente in der SVG muss gestylt werden wie normale HTML-Elemente (wie ein <span> zum Beispiel). Sie müssen das einbetten der schriftart in der SVG in form einer CSS -@import. Schauen Sie durch die XML von Ihrer SVG für die <defs> Abschnitt. Dann fügen Sie diesen code in es:
```
<defs>
  <style type="text/css">
    @import url('https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic');
 </style>
</defs>
```
Aktualisieren Sie als Nächstes Ihre <text> element wie diesem:
```
<text font-size="14" fill="#333" style="font-family: 'Roboto';">
   Words go here
</text>
```
Wenn Sie weitere Informationen wünschen, können Sie versuchen, diese website: http://nimbupani.com/about-fonts-in-svg.html. Es hat einige ziemlich gute Informationen über fonts im embedded-SVGs. Ein Beispiel dazu finden Sie hier: https://github.com/marians/test-webfonts-in-svg.
- Schätzen die Mühe, aber leider funktionierte dies nicht so wie ich gehofft hatte.
- Davor hatte ich Angst. Sorry, dass hat nicht funktioniert!
- Sieht aus wie Sie waren in der Nähe! Dabei @import url:() scheint zu funktionieren... immer noch testen obwohl.
- Wenn Sie es arbeiten, lassen Sie mich wissen, so kann ich Bearbeiten meine Antwort so kann es für andere nützlich 🙂
- Keine CDATA erforderlich. Verwenden Sie einfach: @import url('https://fonts.googleapis.com/css?family=Sonsie+One');. Ein Beispiel-Vergleich finden Sie hier: github.com/marians/test-webfonts-in-svg
- Scheint nicht mehr zu funktionieren, überprüft Ihr Beispiel auf github.
- Dies ist, gute Lösungen und seine arbeiten, aber die schriftart ist nicht die Arbeit, wenn ich svg-Dateien in html. haben Sie eine Lösung ?
InformationsquelleAutor

Einige Vorschläge, wenn Sie möchten, dass Ihr logo portable-und offline verfügbar, sollten Sie verbrauchen und einbetten die kleinste version der schriftart möglich.

Erste, optimieren Sie die Schriftgröße, indem Sie nur ziehen in die Konturstärken und Zeichen, die Sie tatsächlich benötigen.

Also statt dieser:

https://fonts.googleapis.com/css?family=Roboto:400,100,100 italic,300,300 italic,400italic,500,500 italic,700,700 italic,900,900 italic

Kondensieren die Optionen und fügen Sie auch die ?text=abc param nur greifen eine Teilmenge von Zeichen wie diese:

https://fonts.googleapis.com/css?family=Roboto:700&text=Wörter%20go%20here

In Ihrem svg, können Sie eine @font-face Deklaration im stylesheet in der <defs> tag wie diesem:

<defs>
  <style>
    @font-face {
      font-family: "Sample font";
      src: url("data:application/font-woff;charset=utf-8;base64,<b64>") format("woff2");
    }
  </style>
</defs>

Schnappen Sie sich die Datei durch navigieren zu den google fonts stylesheet und das herunterladen der aktuellen .woff2-Datei. Sie können konvertieren Sie es in einem b64-string mit base64-encoder oder Lesen Sie mehr unter Konvertieren und Rendern von web fonts zu base64. Nehmen Sie die Zeichenfolge, und fügen Sie es in Ihre Datei. Nur für Klarheit, Sie konnte auch angeben, unicode-Bereich auf die schriftart explizit zu machen, dass Sie nur ziehen Sie in einigen Zeichen

HTML:

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     viewBox="0 0 280 140" width="300">

  <defs>

    <style>
      /* https://fonts.googleapis.com/css?family=Patrick+Hand&text=KAM */
      @font-face {
        font-family: 'Patrick Hand';
        /* src: url(https://fonts.gstatic.com/l/font?kit=LDI1apSQOAYtSuYWp8ZhfYeMXNDN0vF8&skey=7fb0ea6515a61339&v=v11) format('woff2') */
        src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff2');
        unicode-range: U+004B, U+0041, U+004D
      }
      text { 
        font-size: 140px;
        font-family: 'Patrick Hand', cursive;
        font-weight: 700; 
      }
    </style>
  </defs> 

    <text x="51"  y="132" rotate="-30">K</text>
    <text x="100" y="100" rotate="0">A</text>
    <text x="150" y="95"  rotate="30">M</text>

</svg>