tag:forum.selfhtml.org,2005:/self Das Leid mit Schriftarten – SELFHTML-Forum 2022-01-11T14:21:41Z https://forum.selfhtml.org/self/2022/jan/06/das-leid-mit-schriftarten/1795044#m1795044 RedIndian6180 2022-01-06T14:31:54Z 2022-01-06T14:49:41Z Das Leid mit Schriftarten <p>Moin.</p> <p>Ich habe folgende css-Dateien im css-Ordner: bo2014.css und format.css</p> <p>In der bo2014 steht folgendes:</p> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@font-face</span></span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'onkelz_2014regular'</span><span class="token punctuation">;</span> <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'../fonts/bo2014/onkelz2014BO2014.eot'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'../fonts/bo2014/onkelz2014BO2014.woff2'</span><span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'woff2'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'../fonts/bo2014/onkelz2014BO2014.woff'</span><span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'woff'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'../fonts/bo2014/onkelz2014BO2014.ttf'</span><span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'truetype'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'../fonts/bo2014/onkelz2014BO2014.svg#open_sanslight'</span><span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'svg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>In der format.css soll in dem Bereich auf die Schriftart zurückgegriffen werden:</p> <pre><code class="block language-css"><span class="token selector">.name</span> <span class="token punctuation">{</span><span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>2.6rem<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span>2.6rem<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span>.4rem<span class="token punctuation">;</span> <span class="token property">text-transform</span><span class="token punctuation">:</span>uppercase<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Mit font-family:"onkelz_2014regular", klappt es nicht. Was mache ich falsch?</p> <p>Vielen Dank im Voraus!</p> https://forum.selfhtml.org/self/2022/jan/06/das-leid-mit-schriftarten/1795045#m1795045 Rolf B 2022-01-06T15:03:39Z 2022-01-06T15:03:39Z Das Leid mit Schriftarten <p>Hallo RedIndian6180,</p> <p>ich weiß nicht, ob der Unterstrich ein Problem in Fontnamen darstellt, aber ich würde es nicht annehmen.</p> <p>Bitte prüfe im Netzwerk-Tab der Entwicklerwerkzeugen des Browsers, ob die Fontdateien geladen werden konnten. Die URL muss relativ zur CSS Datei angegeben sein, in der der Font definiert wird.</p> <p>Du solltest auch die SVG-Variante weglassen. Die werden eh nur vom Safari unterstützt und werden als "don't use in new projects" eingestuft.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/jan/06/das-leid-mit-schriftarten/1795046#m1795046 Der Martin 2022-01-06T15:21:01Z 2022-01-06T15:21:01Z Das Leid mit Schriftarten <p>Hallo,</p> <blockquote> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@font-face</span></span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'onkelz_2014regular'</span><span class="token punctuation">;</span> <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'../fonts/bo2014/onkelz2014BO2014.eot'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'../fonts/bo2014/onkelz2014BO2014.woff2'</span><span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'woff2'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'../fonts/bo2014/onkelz2014BO2014.woff'</span><span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'woff'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'../fonts/bo2014/onkelz2014BO2014.ttf'</span><span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'truetype'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'../fonts/bo2014/onkelz2014BO2014.svg#open_sanslight'</span><span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'svg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>das sieht für mich falsch aus. Schau dir das nochmal <strong>sehr</strong> kritisch an. Achte vor allem darauf, wo ein Komma stehen soll und wo ein Semikolon.</p> <p>Immer eine Handbreit Wasser unterm Kiel<br>  Martin</p> <div class="signature">-- <br> Wenn ich den See seh, brauch ich kein Meer mehr. </div> https://forum.selfhtml.org/self/2022/jan/06/das-leid-mit-schriftarten/1795150#m1795150 Linuchs 2022-01-11T00:16:51Z 2022-01-11T00:16:51Z Das Leid mit Schriftarten <p>Ist das inzwischen gelöst?</p> <p>Dateien (Hintergrundbilder, Schriftarten, ...), die in css-Dateien erwähnt werden, müssen eine absolute Pfadangabe haben (die der Browser aufrufen kann) oder eine relative aus der Sicht dieser css-Datei.</p> <p>Du hast die relative gewählt:</p> <p>../fonts/bo2014/onkelz2014BO2014.ttf</p> <p>Die css-Datei ist im Ordner css?</p> <ul> <li>dann geht .. eine Ebene höher,</li> <li>fonts in den Ordner css/../fonts</li> <li>bo2014 in den Ordner css/../fonts/bo2014</li> </ul> <p>Dort muss die Datei onkelz2014BO2014.ttf liegen. Ist das der Fall?</p> https://forum.selfhtml.org/self/2022/jan/06/das-leid-mit-schriftarten/1795047#m1795047 Rolf B 2022-01-06T15:21:54Z 2022-01-06T15:21:54Z Das Leid mit Schriftarten <p>Hallo Der,</p> <p>uuups - so ein blöder Fliegenklecks auf dem Bildschirm…</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/jan/06/das-leid-mit-schriftarten/1795048#m1795048 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2022-01-06T15:28:23Z 2022-01-06T15:30:11Z Das Leid mit Schriftarten <p>@@Der Martin</p> <blockquote> <blockquote> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@font-face</span></span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'onkelz_2014regular'</span><span class="token punctuation">;</span> <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'../fonts/bo2014/onkelz2014BO2014.eot'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'../fonts/bo2014/onkelz2014BO2014.woff2'</span><span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'woff2'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'../fonts/bo2014/onkelz2014BO2014.woff'</span><span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'woff'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'../fonts/bo2014/onkelz2014BO2014.ttf'</span><span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'truetype'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'../fonts/bo2014/onkelz2014BO2014.svg#open_sanslight'</span><span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'svg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>das sieht für mich falsch aus. Schau dir das nochmal <strong>sehr</strong> kritisch an. Achte vor allem darauf, wo ein Komma stehen soll und wo ein Semikolon.</p> </blockquote> <p>Kommas und Semikolons sind schon richtig. Es fehlt <code>src:</code>.</p> <hr> <p>Na ja, es fehlt nicht, sondern die Referenz auf das EOT-File ist zuviel. Ebenso wie die Referenzen auf TTF und SVG. Weg damit!</p> <p>Man muss Webfonts nur noch als WOFF2 einbinden. WOFF (1) nur, wenn man’s schonmal hat. Ansonsten kann man auch prima damit leben, an die Null-Komma-irgendwas-Nutzerschaft des IE keine Webfonts auszuliefern.</p> <p> LLAP</p> <p>--<br> <em>„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“</em><br> — Joachim Gauck über Impfgegner</p> https://forum.selfhtml.org/self/2022/jan/06/das-leid-mit-schriftarten/1795049#m1795049 Der Martin 2022-01-06T15:31:02Z 2022-01-06T15:31:02Z Fliegenschiss <p>Hallo,</p> <blockquote> <p>uuups - so ein blöder Fliegenklecks auf dem Bildschirm…</p> </blockquote> <p>du hast das vielleicht scherzhaft gemeint - aber ich hatte vor ein paar Tagen tatsächlich ein paar <strong>echte</strong> Fliegenschisse auf dem Bildschirm. Etwa einen halben Millimeter große schwarze Punkte. Konnte man, wenn Text an der passenden Stelle dargestellt wurde, tatsächlich für einen Punkt halten.</p> <p>Das hab ich dann aber doch recht schnell wieder gereinigt. </p> <p>Immer eine Handbreit Wasser unterm Kiel<br>  Martin</p> <div class="signature">-- <br> Wenn ich den See seh, brauch ich kein Meer mehr. </div> https://forum.selfhtml.org/self/2022/jan/06/das-leid-mit-schriftarten/1795154#m1795154 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2022-01-11T05:55:51Z 2022-01-11T05:55:51Z Das Leid mit Schriftarten <p>@@Linuchs</p> <blockquote> <p>Dort muss die Datei onkelz2014BO2014.ttf liegen.</p> </blockquote> <p>Nein, das muss sie nicht. Und <a href="https://forum.selfhtml.org/self/2022/jan/06/das-leid-mit-schriftarten/1795048#m1795048" rel="noopener noreferrer">sollte auch nicht</a>.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“</em><br> — Joachim Gauck über Impfgegner </div> https://forum.selfhtml.org/self/2022/jan/06/das-leid-mit-schriftarten/1795159#m1795159 Tabellenkalk 2022-01-11T07:49:17Z 2022-01-11T07:49:17Z Das Leid mit Schriftarten <p>Hallo, :</p> <blockquote> <p>../fonts/bo2014/onkelz2014BO2014.ttf</p> <p>Die css-Datei ist im Ordner css?</p> <ul> <li>dann geht .. eine Ebene höher,</li> <li>fonts in den Ordner css/../fonts</li> </ul> </blockquote> <p>Ich verstehe nicht, was du hier sagen möchtest.<br> Der Ordner <code>fonts</code> muss zusammen mit dem <code>css</code>-Ordner im gleichen übergeordneten Ordner liegen.</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2022/jan/06/das-leid-mit-schriftarten/1795160#m1795160 Rolf B 2022-01-11T08:16:03Z 2022-01-11T08:16:03Z Das Leid mit Schriftarten <p>Hallo Tabellenkalk,</p> <p>Linuchs ist ebenso auf den Fliegenschiss über dem Komma reingefallen wir andere auch, aber wenn man die Referenzierung von CSS Ressourcen erklären will, liegt er genau richtig.</p> <p><code>css/../fonts/foo.wuff2</code> heißt doch: Geh nach <code>css</code>, geh wieder raus, geh dann nach <code>fonts</code> und nimm dir dort foo.wuff2 an die Leine .</p> <p>Ausgehend vom Webroot gibt es natürlich einen kürzeren Pfad. Aber wenn die Dateireferenz in einer CSS Datei im CSS Ordner gemacht wird, dann ist der Anfang des Pfades vorgegeben und man muss die richtige Fortsetzung benennen.</p> <p>Man könnte höchstens diskutieren, ob man den fonts-Ordner verschieben sollte, so dass er nicht ein Geschwisterordner von css ist, sondern ein Unterordner.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/jan/06/das-leid-mit-schriftarten/1795172#m1795172 Linuchs 2022-01-11T14:21:41Z 2022-01-11T14:21:41Z Das Leid mit Schriftarten <blockquote> <p>Der Ordner fonts muss zusammen mit dem css-Ordner im gleichen übergeordneten Ordner liegen.</p> </blockquote> <p>Ja, relativ adressiert sieht das so aus: <code>../fonts</code></p> <p><code>css/../fonts</code> war falsch, sorry. Ziehe meine Beiträge zurück.</p>