Webdesign

Aus Doku-Wiki
Version vom 22. November 2016, 09:46 Uhr von Uli (Diskussion | Beiträge) (→‎Schriften mittels CSS laden)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Zur Navigation springenZur Suche springen

HTML und CSS

Tutorials

w3schools

YAML: Framework

Zen Wireframe Typo3 Template

Schriften mittels CSS laden

CSS3 ermöglicht per @font-face eigene Schriftarten einzubetten. Alle modernen Browser unterstützen diese Funktion, auch wenn nicht alle die gleichen Dateiformate unterstützen.
Liegt die referenzierte Schriftart allerdings nicht auf der gleichen Domain stößt man jedoch plötzlich auf das Problem, dass der Code im Firefox nicht mehr funktioniert, in anderen Browsern jedoch schon. Hierbei handelt es sich um eine Sicherheitsfunktion von Firefox, der die Schriften nur lädt, wenn der Webserver ihm dies erlaubt. Hier findet sich die entsprechende Doku von Mozilla. Die Konfiguration kann man in einer .htaccess ablegen, oder direkt in der Apache2 Konfiguration eintragen:

  • Für alle den Zugriff auf die Schriftarten erlauben
<FilesMatch "\.(ttf|otf|svg|eot|woff|woff2)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
  • Eingeschränkter Zugriff auf die Schriftarten erlauben
<FilesMatch "\.(ttf|otf|svg|eot|woff|woff2)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "http://sub1.example.com,http://sub2.example.com"
</IfModule>
</FilesMatch>

Gemäß Mozilla ist die Komma getrennte Angabe mehrerer Domains zulässig. Dies scheint aber nicht immer zu gehen, deshalb hier ein Beispiel mit Regex.

<FilesMatch "\.(ttf|otf|svg|eot|woff|woff2)$">
 SetEnvIf Origin »
   "^http(s)?://(.+\.)?(domain1\.org|domain\.com)$" origin_is=$0
 Header always set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch> 
Original Doku: http://www.lowest-common-denominator.com/2010/01/http_access_control_to_multipl.php

Bild-Agenturen

T-Online PolyLooks

Blind-Text

Blindtext-Generator

Blind Image Generator