Laden einer externen Schriftart über Inline-CSS

Question 1

Ist es möglich, eine externe Schriftart über Inline-CSS zu laden?

Hinweis: Ich bin nicht sprechen über die Verwendung einer externen CSS-Datei mit a @font-face Definition, sondern eher so etwas wie das Folgende:

<h1 style="font-family:myfont;
    src:('http://example.com/font/myfont.tff')">test</h1>

Question 2

Ist es möglich, eine externe Schriftart mit Inline-CSS zu laden? NICHT mit einer externen CSS-Datei [….].

Ja, Sie können eine oder mehrere Schriftarten mit Base64 codieren, wie in gezeigt Dieser Beitrag von Stephen Scaff und lege sie in a style Block in Ihrer Seite, um die externe Anfrage zu vermeiden.

Es ist möglicherweise auch möglich, diese Technik in der von Ihnen beschriebenen Weise zu verwenden, wenn der von Ihnen verwendete Browser dies unterstützt.

<style>
  @font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: normal;
    src: local('PT Sans'), local('PTSans-Regular'),
      url(data:application/font-woff2;charset=utf-8;base64,d09GRgABAAAAAHowABMAAAAA+OAA) format('woff2');
  }
  @font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: normal;
    src: local('PT Serif'), local('PTSerif-Regular'),
      url(data:application/font-woff2;charset=utf-8;base64,d09GRgABAAAAAIQYABMAAAAA/MAA) format('woff2');
  }
</style>

Jeder moderne Browser unterstützt WOFF2, also solltest du das wahrscheinlich verwenden und nur das für die absehbare Zukunft. Diese Technik verbessert auch Ihre Seitengeschwindigkeitswerte, aber wird die Leistung beeinträchtigen insgesamt (selbst für das Laden der ersten Seite), es sei denn, Sie kodieren nur kritische Seitenelemente mit Base64 (z. B. Glyphen der Schriftart, die über dem Falz angezeigt werden) und asynchron laden der Rest.

In Bezug auf die Leistung ist es derzeit am besten, sie zu verwenden Brotli-Komprimierung und leiten Sie das Webfont-Stylesheet mit nach unten HTTP/2-Server-Push.

Question 3

Sie können a nicht einschließen @font-face Regel in a style -Attribut (das im engsten Sinne „Inline-CSS“ ist). Gemäß der HTML 4.01-Spezifikation können Sie eine solche Regel nicht in die einfügen body Element überhaupt („Inline-CSS“ im weiteren Sinne, wozu auch gehört style Elemente). Aber in der Praxis ist es möglich.

In der Praxis, wenn Sie a style Element drin body, wird es von Browsern so verarbeitet, als ob es an der syntaktisch korrekten Stelle, dh innerhalb der head Element. Es funktioniert sogar „rückwärts“ und wirkt sich auf Elemente aus, die davor erscheinen.

Sie können diesen Ansatz sogar vornehmen – was nur verwendet werden sollte, wenn Sie das nicht ändern können head – formal korrekt gemäß HTML5 CR. Es erlaubt ein style -Element am Anfang eines beliebigen Elements mit fließendem Inhalt als Inhaltsmodell. Aktuelle Browser ignorieren die scoped Attribut.

Aktualisieren: Folgendes ist nicht mehr relevant, da der Validierungsfehler behoben wurde.

Allerdings gibt es eine Insekt im W3C Markup Validator und in validator.nu: sie verbieten style am Anfang von body. Um diesen Fehler zu beheben und Ihr Dokument zusätzlich zur Gültigkeit validieren zu lassen, können Sie ein Extra verwenden div Element:

<body>
<div>
<style>
/* your @font-face and other CSS rules go here */
</style>
<!-- your document body proper goes here -->
</div>
</body>

Question 4

Nein, nicht das ich wüsste. Sie müssen diese Art von Dingen auf a deklarieren <style> block oder eine externe CSS-Datei.

Wenn Sie jedoch so etwas wollen, ist es sehr wahrscheinlich, dass Sie es falsch machen.

Question 5

Wenn Sie @font-face verwenden, sollten Sie in der Lage sein, Folgendes zu tun:

CSS

@font-face {
font-family: 'RalewayThin';
src: url('fonts/raleway_thin-webfont.eot');
src: url('fonts/raleway_thin-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/raleway_thin-webfont.woff') format('woff'),
     url('fonts/raleway_thin-webfont.ttf') format('truetype'),
     url('fonts/raleway_thin-webfont.svg#RalewayThin') format('svg');
font-weight: normal;
font-style: normal;

}

Stellen Sie sicher, dass Sie die Schriftarten einbeziehen – das obige Beispiel hat alle Schriftarten in einem relativen Pfadverzeichnis zur CSS-Datei platziert.

HTML

<h1 style="font-family:RalewayThin,Helvetica, sans-serif;">

Sie sollten in der Lage sein, kostenlose webbasierte @font-face-Schriftarten zu finden Hier.