{"id":139,"date":"2013-02-25T12:49:04","date_gmt":"2013-02-25T11:49:04","guid":{"rendered":"http:\/\/paulchrablass.de\/blog\/?p=139"},"modified":"2013-04-14T17:35:07","modified_gmt":"2013-04-14T15:35:07","slug":"font-face-svg-schriften-und-fragmentbezeichner","status":"publish","type":"post","link":"https:\/\/paulchr.ablass.me\/blog\/2013\/02\/25\/font-face-svg-schriften-und-fragmentbezeichner\/","title":{"rendered":"@font-face, SVG-Schriften und Fragmentbezeichner"},"content":{"rendered":"<p>Um SVG-Schriften mittels der <code>@font-face<\/code>-Syntax einzubetten, wird bekanntlich folgendes Css ben\u00f6tigt:<\/p>\n<pre><code>@font-face {\r\n\tfont-family: \"Open Sans Regular\";\r\n\tsrc: url(\"..\/fonts\/open-sans-regular\/OpenSans-Regular-webfont.svg#<strong>OpenSansRegular<\/strong>\") format(\"svg\");\r\n}<\/code><\/pre>\n<p>Spannend ist der Fragmentbezeichner hinter dem Dateinamen, von mir fett hervorgehoben. Normalerweise sollte dieser n\u00e4mlich in der Schriftdatei noch einmal auftauchen, n\u00e4mlich als Attributwert f\u00fcr <code>id<\/code> innerhalb dieses XML-Snippets:<\/p>\n<pre><code>&lt;font id=\"<strong>OpenSansRegular<\/strong>\" horiz-adv-x=\"1171\"&gt;<\/code><\/pre>\n<p>Tja. <em>Normalerweise<\/em>.<\/p>\n<p>Unterscheiden sich der Attributwert und der Fragmentbezeichner, wird die Schrift n\u00e4mlich nicht geladen und der davorsitzende Frontend-Entwickler kann eine ziemlich lange Zeit damit verbringen, diesen Fehler zu finden&hellip;<\/p>\n<h3>Links<\/h3>\n<p><a href=\"http:\/\/blog.echoenduring.com\/2011\/12\/01\/quick-tip-svg-fonts-font-face\/\">Quick Tip: SVG Fonts &#038; @font-face<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Um SVG-Schriften mittels der @font-face-Syntax einzubetten, wird bekanntlich folgendes Css ben\u00f6tigt: @font-face { font-family: &#8222;Open Sans Regular&#8220;; src: url(&#8222;..\/fonts\/open-sans-regular\/OpenSans-Regular-webfont.svg#OpenSansRegular&#8220;) format(&#8222;svg&#8220;); } Spannend ist der Fragmentbezeichner hinter dem Dateinamen, von mir fett hervorgehoben. Normalerweise sollte dieser n\u00e4mlich in der Schriftdatei noch einmal auftauchen, n\u00e4mlich als Attributwert f\u00fcr id innerhalb dieses XML-Snippets: &lt;font id=&#8220;OpenSansRegular&#8220; horiz-adv-x=&#8220;1171&#8243;&gt; Tja. Normalerweise. [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[77],"tags":[38,37,39],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2Vohc-2f","jetpack-related-posts":[{"id":357,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/08\/26\/aggressives-firefox-schriftcaching-mit-versionsnummern-austricksen\/","url_meta":{"origin":139,"position":0},"title":"Aggressives Firefox-Schriftcaching mit Versionsnummern austricksen","author":"Paul-Christian Abla\u00df","date":"26. August 2013","format":false,"excerpt":"S\u00e4mtliche Firefox-Versionen, die ich unter Ubuntu, Windows 7 und Mac OS X benutze, speichern einmal geladene Webfonts sehr aggressiv. Aggressiv bedeutet in diesem Fall, dass ein normales L\u00f6schen des Caches zum Neu-Laden der Schrift nicht ausreicht, stattdessen muss zus\u00e4tzlich noch der Browser neu gestartet werden. Da dies im Entwicklungsprozess doch\u2026","rel":"","context":"In &quot;Browser&quot;","block_context":{"text":"Browser","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/browser\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":147,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/02\/26\/lesetipp-ueber-die-richtige-einbindung-von-webfonts\/","url_meta":{"origin":139,"position":1},"title":"Lesetipp: \u00dcber die richtige Einbindung von Webfonts","author":"Paul-Christian Abla\u00df","date":"26. Februar 2013","format":false,"excerpt":"Im Smashing Magazine gibt es zwei sehr gute Artikel zum Thema @font-face. In Avoiding Faux Weights And Styles With Google Web Fonts wird erkl\u00e4rt, wie Schriften \u00fcber das Google Font Directory richtig eingebunden werden k\u00f6nnen. Ganz so trivial ist das n\u00e4mlich nicht, denn die Einbindung \u00e1 la Google Webfonts funktioniert\u2026","rel":"","context":"In &quot;Allgemein&quot;","block_context":{"text":"Allgemein","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/allgemein\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":561,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/02\/19\/lesetipp-faux-bold-vermeiden-verschieden-fette-schriftschnitte-richtig-einbinden\/","url_meta":{"origin":139,"position":2},"title":"Lesetipp: faux bold vermeiden &#038; verschieden fette Schriftschnitte richtig einbinden","author":"Paul-Christian Abla\u00df","date":"19. Februar 2014","format":false,"excerpt":"Gerrit van Aaken erkl\u00e4rt in Webfonts: Fette Fehlerquelle, wie das Einbinden von unterschiedlich fetten Schnitten einer Schrift funktioniert. Eine sehr gute, aktuelle, deutsche Zusammenfassung zu einer Technik, die zum Handwerkszeug eines Frontend Developers geh\u00f6rt und die leider oft falsch genutzt wird.","rel":"","context":"In &quot;Css&quot;","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":297,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/05\/26\/sass-mixin-rem-mit-px-fallback\/","url_meta":{"origin":139,"position":3},"title":"Sass-Mixin: rem mit px-Fallback","author":"Paul-Christian Abla\u00df","date":"26. Mai 2013","format":false,"excerpt":"Ich nutze im Css so gut wie ausschlie\u00dflich rem (siehe dazu auch CSS-Tipp: rem als Einheit f\u00fcr Schriftgr\u00f6\u00dfe nutzen) als Einheit und trug das ben\u00f6tigte Pixel-Fallback bisher h\u00e4ndisch ein. Mit der Zeit nervt das ziemlich, daher war ich sehr erfreut als ich vor kurzem das rem-Mixin f\u00fcr Sass von Hans\u2026","rel":"","context":"In &quot;Css&quot;","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":700,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/07\/17\/schrift-metadaten-mit-ttxfonttools-bearbeiten\/","url_meta":{"origin":139,"position":4},"title":"Schrift-Metadaten mit TTX\/FontTools bearbeiten","author":"Paul-Christian Abla\u00df","date":"17. Juli 2014","format":false,"excerpt":"Nach der Installation von TTX\/FontTools folgt nun ein Beitrag zur Nutzung. Erzeugen der XML-.ttx-Datei TTX\/FontTools ist ein Kommandozeilentool, daher wird es ausschlie\u00dflich mit dem Terminal bedient und hat kein GUI. Das macht aber \u00fcberhaupt nichts, denn die Nutzung ist denkbar simpel: Mit $ ttx \/User\/paul.ablass\/Desktop\/SWBTH___.TTF wird der Befehl gegeben, die\u2026","rel":"","context":"In &quot;Tools&quot;","block_context":{"text":"Tools","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/tools\/"},"img":{"alt_text":"TTX\/FontTools in Aktion","src":"https:\/\/i0.wp.com\/paulchr.ablass.me\/blog\/wp-content\/uploads\/2014\/07\/ttx.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/paulchr.ablass.me\/blog\/wp-content\/uploads\/2014\/07\/ttx.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/paulchr.ablass.me\/blog\/wp-content\/uploads\/2014\/07\/ttx.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/paulchr.ablass.me\/blog\/wp-content\/uploads\/2014\/07\/ttx.png?resize=700%2C400 2x"},"classes":[]},{"id":425,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/09\/24\/sass-compass-encoding-auf-utf-8-umstellen\/","url_meta":{"origin":139,"position":5},"title":"Sass-\/ Compass-Encoding auf UTF-8 umstellen","author":"Paul-Christian Abla\u00df","date":"24. September 2013","format":false,"excerpt":"Beim erstmaligen compass compile eines neuen Projekt wurde mir heute die folgende Fehlermeldung ausgegeben: Invalid US-ASCII character \"\\xC3\" Sass und Compass bekommen ihre Encoding-Optionen von Ruby, dass sie wiederum vom Environment (sprich: Dem Server, auf dem es l\u00e4uft) \u00fcbernimmt. Um dieses Problem zu beheben, k\u00f6nnen zum einen die Locales (Spracheinstellungen)\u2026","rel":"","context":"In &quot;Tools&quot;","block_context":{"text":"Tools","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/tools\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/139"}],"collection":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/comments?post=139"}],"version-history":[{"count":12,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/139\/revisions"}],"predecessor-version":[{"id":560,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/139\/revisions\/560"}],"wp:attachment":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/media?parent=139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/categories?post=139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/tags?post=139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}