{"id":2991,"date":"2011-03-24T09:09:16","date_gmt":"2011-03-24T08:09:16","guid":{"rendered":"https:\/\/www.herr-rau.de\/wordpress\/?p=2991"},"modified":"2023-06-19T10:16:58","modified_gmt":"2023-06-19T08:16:58","slug":"zeichensatze-in-webseiten-einbinden","status":"publish","type":"post","link":"https:\/\/www.herr-rau.de\/wordpress\/2011\/03\/zeichensatze-in-webseiten-einbinden.htm","title":{"rendered":"Zeichens\u00e4tze in Webseiten einbinden"},"content":{"rendered":"<div style='text-align:right;'><small>(<a href='https:\/\/www.herr-rau.de\/wordpress\/2011\/03\/zeichensatze-in-webseiten-einbinden.htm#comments'>2 Kommentare.<\/a>)<\/small> <\/div>\n<p>Nur um zu zeigen, dass es geht, Sonett Nummer 15 von Edmund Spenser:<\/p>\n\n\n\n<p><style type=\"text\/css\">@font-face { font-family: 'IM FELL English Pro'; src:url('https:\/\/www.herr-rau.de\/wordpress\/archiv\/IMFeENrm29C.otf'); }<\/style><\/p>\n\n<div style=\"font-size:120%; padding-left:10px; font-family: 'IM FELL English Pro','Times', 'Lucida Grande', Verdana, Arial, Sans-Serif;\">\nYe tradefull merchants, that with weary toyle<br\/>\nDo \u017feeke mo\u017ft pretious things to make your gain,<br\/>\nAnd both the Indias of their trea\u017fures \u017fpoile,<br\/>\nWhat needeth you to \u017feeke \u017fo farre in vaine?<br\/>\nFor loe my love doth in her \u017felfe containe<br\/>\nAll this world\u2019s riches that may farre be found.<br\/>\nIf \u017faphyres, loe her eyes be \u017faphyres plaine;<br\/>\nIf rubies, loe her lips be rubies \u017found;<br\/>\nIf pearls, her teeth be pearls both pure and round;<br\/>\nIf yvorie, her forhead ivorie weene;<br\/>\nIf gold, her locks are \ufb01ne\u017ft gold on ground;<br\/>\nIf \u017filver, her faire hands are \u017filver \u017fheene.<br\/>\nBut that which faire\u017ft is, but few behold:<br\/>\nHer mind, adorned with vertues manifold. <\/div>\n\n\n\n<p>Das Gedicht oben ist keine Grafik, sondern benutzt einen sch\u00f6nen alten Zeichensatz aus dem 17. Jahrhundert (etwas zu sp\u00e4t f\u00fcr Spenser). Dieser exotische Zeichensatz d\u00fcrfte aber auf keinem Rechner meiner Leser vorhanden sein, er ist vielmehr derart eingebunden, dass er beim Laden der Seite mit \u00fcbertragen wird.<\/p>\n\n\n\n<p>Am einfachsten bettet man einen Zeichensatz ein, indem man die ttf- oder otf-Datei in ein Verzeichnis hochl\u00e4dt, in diesem Fall gleich das, wo die CSS-Datei liegt, und diese Information dann so in die CSS-Datei schreibt:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n&nbsp;font-family: IM FELL English Pro;\n&nbsp;src:url('IMFeENrm29C.otf');\n}<\/code><\/pre>\n\n\n\n<p>Alternativ au\u00dferhalb der CSS-Datei, also im Kopf einer konkreten Seite oder sonstwo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style type=\"text\/css\"&gt;\n &nbsp;@font-face:  {\n &nbsp;&nbsp;&nbsp;font-family: IM FELL English Pro;\n &nbsp;&nbsp;&nbsp;src:url('http:\/\/pfad\/zur\/datei\/IMFeENrm29C.otf');\n &nbsp;}\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p>Dann kann die Schrift <em>IM FELL English Pro<\/em> &#8211; die Namen kann man nat\u00fcrlich selber w\u00e4hlen &#8211; wie jeder andere Zeichensatz verwendet werden, in der CSS-Datei selber oder in einem div-Block anderswo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"font-family: 'IM FELL English Pro','Times'\"&gt; ... &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Das Hochladen des Fonts macht in meinem Fall noch einmal 190 KB aus.<\/p>\n\n\n\n<p>Der Zeichensatz, den ich verwendet habe, geh\u00f6rt zu den <a href=\"http:\/\/iginomarini.com\/fell\/the-revival-fonts\/\">Fell Types<\/a>, wenn man dem Link folgt, erf\u00e4hrt man mehr zu deren Entstehungsgeschichte. Man kann dort auch alle dreizehn Fonts anschauen und herunterladen.<\/p>\n\n\n\n<p>Diese Reihe von Zeichens\u00e4tzen ist unter der <a href=\"http:\/\/scripts.sil.org\/cms\/scripts\/page.php?site_id=nrsi&amp;item_id=OFL\">SIL Open Font License, Version 1.1<\/a> ver\u00f6ffentlicht. Und deswegen darf ich sie hier auch anwenden &#8211; die meisten Zeichens\u00e4tze auf den eigene Rechnern d\u00fcrften nicht unter einer derartigen Lizenz stehen, so dass man sie vermutlich nicht einbinden darf &#8211; denn bei jedem Aufruf einer solchen Seite wird ja der gesamte Zeichensatz an einen fremden Rechner \u00fcbermittelt.<\/p>\n\n\n\n<p>(Und wie findet man so was? Na, \u00fcber <a href=\"http:\/\/propnomicon.blogspot.com\/2010\/09\/fell-types.html\">ein Rollenspielblog<\/a> nat\u00fcrlich.)<\/p>\n\n\n\n<p>&#8212; Man beachte auch das lange <em>\u017f<\/em>. Die Regeln f\u00fcr die Verteilung von langem <em>\u017f<\/em> und <em>s<\/em> stehen <a href=\"http:\/\/de.wikipedia.org\/wiki\/Langes_s#Regeln_zur_Verwendung_von_langem_.C5.BF_und_rundem_s\">bei Wikipedia<\/a> oder im Duden. Faustregel, die meist gilt: am Anfang und im Inneren eines Worts oder genauer: Wortbestandteils (Morphem) lang, am Ende kurz. Oft sieht man Altert\u00fcmelndes ohne langes <em>\u017f<\/em>, da sch\u00fcttelt man dann immer den Kopf \u00fcber die Zeiten und Sitten heutzutage.<\/p>\n\n\n\n<p>Beim <em>\ufb01<\/em> habe ich die Ligatur durchgef\u00fchrt, also die typographische Verbindung der beiden Buchstaben. Das ist n\u00e4mlich ein Standardzeichen. Auf die verschiedenen Ligaturen beim <em>\u017f<\/em> habe ich verzichet. Die sind zwar im Zeichensatz vorhanden, aber in anderen Zeichens\u00e4tzen &#8211; mit kurzem s &#8211; gibt es nat\u00fcrlich keine Entsprechung daf\u00fcr, so dass manche Blogleser noch mehr Schwierigkeiten h\u00e4tten, den Text zu lesen. Denn <a href=\"http:\/\/webfonts.info\/wiki\/index.php?title=@font-face_browser_support\">nicht alle Browser<\/a> unterst\u00fctzen dieses Einbetten von Fonts, wer also einfach die Schriftart <em>Times<\/em> sieht, sieht leider gar nicht, worum es geht. Safari (au\u00dfer: iPad etc.), Firefox, Google Chrome, Opera d\u00fcrften keine Probleme haben; Internet Explorer unterst\u00fctzt wohl &#8211; wen wundert&#8217;s &#8211; nur das eigene propriet\u00e4re Format. Und zumindest mein Windows-Firefox stellt die Schrift auch nicht besonders gut dar, deshalb habe ich sie auch so gro\u00df gemacht. Safari gl\u00e4ttet die Schrift schon sehr viel besser.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>(2 Kommentare.) Nur um zu zeigen, dass es geht, Sonett Nummer 15 von Edmund Spenser: Ye tradefull merchants, that with weary toyle Do \u017feeke mo\u017ft pretious things to make your gain, And both the Indias of their trea\u017fures \u017fpoile, What needeth you to \u017feeke \u017fo farre in vaine? For loe my love doth in her [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[142],"class_list":["post-2991","post","type-post","status-publish","format-standard","hentry","category-fundstuecke","tag-blogbasteln"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/posts\/2991","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/comments?post=2991"}],"version-history":[{"count":2,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/posts\/2991\/revisions"}],"predecessor-version":[{"id":58053,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/posts\/2991\/revisions\/58053"}],"wp:attachment":[{"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/media?parent=2991"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/categories?post=2991"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/tags?post=2991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}