Fonts einbinden
heinetz
Fonts einbinden
heinetz
Gunnar Bittersmann
Rolf BHallo Forum,
nachdem ich zuerst ganz elegant meine Schriften mit einem Node-Modul über Javascript eingebunden hatte, was zu Problemen geführt hatte, habe ich die Schriften nun ganz einfach im Head eingebunden:
<head>
<style>
@font-face {
src: url('/fonts/Lato-Light-7244318390.woff2') format('woff2');
font-family: 'Lato';
font-style: normal;
font-weight: normal;
}
</style>
</head>
Macht das so Sinn?
gruss, heinetz
-
@@heinetz
<head> <style> @font-face { src: url('/fonts/Lato-Light-7244318390.woff2') format('woff2'); font-family: 'Lato'; font-style: normal; font-weight: normal; } </style> </head>Macht das so Sinn?
Nicht so ganz.
Warum in einem
style-Element und nicht im externen Stylesheet?Lato Light und
font-weight: normalpasst nicht so recht zusammen. Der Light-Schnitt istfont-weight: 300.LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
@@heinetz
<head> <style> @font-face { src: url('/fonts/Lato-Light-7244318390.woff2') format('woff2'); font-family: 'Lato'; font-style: normal; font-weight: normal; } </style> </head>Macht das so Sinn?
Nicht so ganz.
Warum in einem
style-Element und nicht im externen Stylesheet?Weil der Pfad zum Font-File im njk-Template aus einer Variablen kommt.
Lato Light und
font-weight: normalpasst nicht so recht zusammen. Der Light-Schnitt istfont-weight: 300.Hmmmm. Unter: http://www.latofonts.com/2014/02/27/lato-2-0-released/
... wird die Schrift auch mit font-weight: normal eingebunden. Ich habe das so verstanden, dass der Schnitt aus dem font kommt.
LLAP 🖖
gruss, heinetz
-
Hallo heinetz,
PHP ist nicht auf HTML als Containersprache angewiesen, CSS geht auch. Aber ich gebe zu, das ist lästig und die klassischen Editoren unterstützen PHP mit HTML, aber kein PHP mit CSS.
Eine Datei styles.css.php könnte so aussehen. Den Header zu setzen ist wichtig, weil PHP Responses normalerweise dynamisch sind und nicht gecached werden (oder ich hab was falsch verstanden, wie so oft 😉)
<?php header('Cache-Control: public, max-age=31536000'); // Darf 1 Jahr im Cache liegen $font = getLatoFontDescription(); ?> @font-face { font-family: 'Lato'; font-weight: 300; font-style: normal; src: url(<?= $font->Url ?>) format(<?= $font->Format ?> } p.big { font-family: Lato; font-size: 3em; }Was nicht zu gehen scheint, sind CSS Custom Properties (a.ka. CSS-Variablen) in der @font-face Definition. Zumindest zeigte im Experiment
src: url(var(--fontsrc))keine Wirkung. Den Wert für--fontsrchatte ich mit style-Attribut am body-Tag zu setzen versucht, auch mit :root. Ging nicht. Hab's auch mit url(var(--schrift)) im src versucht.:root { --schrift: url('https://fonts.gstatic.com/s/indieflower/v9/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2'); } @font-face { font-family: 'SomeFont'; src: var(--schrift) format('woff2'); } p { font: 20px SomeFont; }Rolf
--
sumpsi - posui - clusi-
@@Rolf B
Eine Datei styles.css.php könnte so aussehen. Den Header zu setzen ist wichtig, weil PHP Responses normalerweise dynamisch sind und nicht gecached werden (oder ich hab was falsch verstanden, wie so oft 😉)
Und weil auch der Medientyp angegeben werden muss:
header('Content-Type: text/css');.LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
@@Gunnar Bittersmann
Und weil auch der Medientyp angegeben werden muss:
header('Content-Type: text/css');.… wenn nicht anderweitig gesetzt, bspw. durch
AddType text/css .css.phpin der Serverkonfiguration.LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-
-
Tach!
... weil PHP Responses normalerweise dynamisch sind und nicht gecached werden (oder ich hab was falsch verstanden, wie so oft 😉)
Möglicherweise. Woran erkennt ein Caching-Mechanismus eine dynamische Response?
Wenn man im Apachen content-type-weise Caching-Werte einstellt, werden davon jedenfalls auch von PHP generierte Dokumente (mit korrektem Content-Type-Header) nicht ausgenommen.
dedlfix.
-
Hallo dedlfix,
Woran erkennt ein Caching-Mechanismus eine dynamische Response?
Weiß nicht so genau. Ich kenne den Apache nicht, nur IIS. Der hat Cache-Einstellungen, aber die beziehen sich auf das Output-Caching des Servers. Ich kann natürlich auch explizit sagen, dass für Dateien in einem bestimmten Ordner bestimmte Header gesetzt werden sollen, aber nicht spezifisch pro Extension.
Es ging mir um das clientseitige Caching. Wenn ich eine CSS Datei über PHP leite (sprich: style.css.php nenne), dann cached Chrome sie nicht. Auch nicht bei Content-Type: text/css. Eine „richtige“ CSS Datei cached er, auch ohne Cache-Control Header. Ob das am ETag Header liegt, den der IIS diesen Ressourcen mitgibt? Eigentlich sollte ein ETag zu HTTP Statuscode 304 führen wenn die Ressource unverändert ist, aber Chrome sagt: "from memory cache", ist also gar nicht beim Server gewesen.
Setze ich im PHP den Cache-Control Header, steht auch hinter der PHP Datei "from memory cache". D.h. Chrome scheint pro Name Extension Regeln zu haben, wie er cachen soll.
Rolf
--
sumpsi - posui - clusi
-
-
Hallo Forum,
ich verwende garkein PHP, sondern ein Build-System mit Node und Nunjucks-Templates. Ich könnte das scss mit npm-module NODE-SASS bearbeiten und da variablen reinschreiben. Das habe ich an anderer Stelle mal gemacht ... weil ich auch den Impuls habe, die font-Definition in eine externe css auszulagern. Und eigentlich war das auch genau das Wesentliche an meiner ursprünglichen Frage:
Spricht etwas dagegen, diese Styles direkt in den <head> zu Schreiben?
gruss, heinetz
-
-
@@heinetz
Lato Light und
font-weight: normalpasst nicht so recht zusammen. Der Light-Schnitt istfont-weight: 300.Hmmmm. Unter: http://www.latofonts.com/2014/02/27/lato-2-0-released/
... wird die Schrift auch mit font-weight: normal eingebunden. Ich habe das so verstanden, dass der Schnitt aus dem font kommt.
Sicher kann man eine Schriftfamilie auch so einbinden:
@font-face { font-family: Lato Light; font-weight: normal; font-style: normal; src: url(/fonts/LatoLatin-Light.woff2) format("woff2"), url(/fonts/LatoLatin-Light.woff) format("woff"); } @font-face { font-family: Lato Light Italic; font-weight: normal; font-style: normal; src: url(/fonts/LatoLatin-LightItalic.woff2) format("woff2"), url(/fonts/LatoLatin-LightItalic.woff) format("woff"); } @font-face { font-family: Lato Heavy; font-weight: normal; font-style: normal; src: url(/fonts/LatoLatin-Heavy.woff2) format("woff2"), url(/fonts/LatoLatin-Heavy.woff) format("woff"); } :root { font-family: Lato Light, sans-serif; font-weight: normal; font-style: normal; } em, i { font-family: Lato Light Italic, sans-serif; font-weight: normal; font-style: normal; } strong, b, h1, h2, h3, h4, h5, h6, th { font-family: Lato Heavy, sans-serif; font-weight: normal; font-style: normal; }Nur ist das unsinnig. Wenn die Schriftdateien nicht geladen werden, ist nichts kursiv und nichts fett.
So sollte man’s machen:
@font-face { font-family: Lato; font-weight: 300; font-style: normal; src: url(/fonts/LatoLatin-Light.woff2) format("woff2"), url(/fonts/LatoLatin-Light.woff) format("woff"); } @font-face { font-family: Lato; font-weight: 300; font-style: italic; src: url(/fonts/LatoLatin-LightItalic.woff2) format("woff2"), url(/fonts/LatoLatin-LightItalic.woff) format("woff"); } @font-face { font-family: Lato; font-weight: 800; font-style: normal; src: url(/fonts/LatoLatin-Heavy.woff2) format("woff2"), url(/fonts/LatoLatin-Heavy.woff) format("woff"); } :root { font-family: Lato, sans-serif; font-weight: 300; } strong, b, h1, h2, h3, h4, h5, h6, th { font-weight: 800; }Eine Schriftfamilie – ein Name. Und
font-weightundfont-stylein den@font-face-Regeln jeweils richtig angeben.LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-
-