CSS: Eigene Schriften einbinden - time4joomla. Die Überschriften auf dieser Site bestehen aus einem Font, den ich per CSS eingebunden und entsprechend den Joomla-Klassen zugewiesen habe.
Leider benutzen der Internet Explorer von Microsoft und die meisten anderen Browser unterschiedliche Fonttypen. Für die meisten Browser reicht ein True-Type-Font (TTF) aus. Der IE benötigt aber einen Open-Type-Font (EOT). Die allermeisten Schriften, die sich im Internet finden, sind TTF-Schriften. Es gibt aber einige Konverter, die einem eine TTF-Datei in eine EOT-Datei wandelt. Hat man seine Schriften zusammen, lädt man diese am besten direkt in das CSS-Verzeichnis des Templates und schreibt dann am Anfang der CSS-Datei dieses hier: 02. 03. font-family:meine_schrift; 04. src:url(fruitopia.eot); 08. 09. font-family:meine_schrift; 10. src:url(fruitopia.ttf); Dort wo man die Schriftart benutzen möchte, einfach so eingeben, wie in diesem Beispiel bei einer h3-Überschrift: 1.h3 {
CSS3 & HTML5 CSS3 Web Fonts - css3-html5.de. Mit der “@font-face” Regel bietet CSS3 die Möglichkeit, eigene Schriften in eine Webseite einzubinden.
In diesem Artikel erkläre ich, wie das funktioniert, und warum WOFF den Webfonts zum Durchbruch verhelfen könnten. Es existieren einige Techniken, um systemfremde Schriftarten auf eine Webseite zu bringen. Die bekannteste Methode ist sIFR (ersetzen der Schrift durch einen Flash Film). Jedoch ist sIFR nicht in jeder Situation zuverlässig genug.
Eine weitere Möglichkeit wäre cufón. Das Einbinden einer Schriftart in ein CSS-Dokument ist denkbar einfach: Die Bezeichnung der “font-family” kann dabei frei gewählt werden. Desweiteren ist es möglich über die Erweiterung “local” zuerst auf dem jeweiligen Computer nach der passenden Schriftart zu suchen: Webfonts lassen sich im vollen Umfang nutzen und bieten freie Skalierbarkeit, schnelle Downloadgeschwindigkeiten, Barrierefreiheit und eine sehr gute Suchmaschinenoptimierung. Die Browserunterstützung der Webfonts ist durchaus unterschiedlich: Webfonts für HTML-Seiten. Stylesheets / CSS-Eigenschaften / Schriftformatierung mit Schriftartendatei. @font-face, src, font-family (Schriftformatierung mit Schriftartendatei) Von diesen in CSS2 eingeführten Angaben wurde nur @font-face vom Internet Explorer und Netscape 4.x unterstützt.
Da sie weder in den Mozilla-Nachfolgern noch in anderen aktuellen Browsern implementiert sind, gehören sie in CSS 2.1 nicht mehr zum Standard! Sie sollten also stets auch passende Alternativ-Schriftarten angeben, wenn Ihre Seiten nicht ausschließlich von Nutzern des Internet Explorer besucht werden (die die Schriftart-Installation bei hoher Sicherheitsstufe auch bestätigen). Über @font-face können Sie für den Internet Explorer eine Schriftart definieren und dabei direkt die Daten-Ressourcen der gewünschten Schriftarten ansprechen, also bestimmte Schriftartendateien. Vorgesehen war außerdem, mit Hilfe spezieller Definitionen die Charakteristika der gewünschten Schriftart exakt beschreiben zu können. @font-face. Web fonts with @font-face. Home / CSS3 Previews / Web fonts with @font-face Not exactly a feature which is new to CSS3, @font-face was first proposed for CSS2 and has been implemented in Internet Explorer since version 5!
However, their implementation relied on the proprietary Embedded Open Type (.eot) format, and no other browsers decided to use this format. With the release of Safari 3.1, however, website makers can use any licensed TrueType (.ttf) or OpenType (.otf) font in their pages. Best 20 webfonts from Google Web Fonts and @font-face embedding. At the moment there are several ways to use non-system fonts on a website.
We will focus on the two least complicated, least expensive systems, Google Web Fonts and the @font-face rule. Fear not, we have not ruled out other paid methods such as Typekit, Fonts.com Web Fonts, Fontdeck, Webtype, WebINK or Fontspring for future posts as they certainly offer high quality typefaces and deserve to be considered. It’s important to be aware that web fonts can generate inadequate visualizations on operating systems which have subpixel rendering turned off in the case of Windows XP. They can also be represented differently depending on the browser used to visualize them. The aim of this post is to facilitate the choice of a series of fonts (out of the hundreds available) whose technical and visual characteristics make them more readable and compatible with a wide variety of devices, browsers and operating systems.
Basically, there are two implementation models: 1. 2. Create Your Own @font-face Kits. Web Fonts: Custom fonts using @font-face, cross-browser font embedding.