Schrift mit @font-face einbinden: Wo ist der Fehler? bearbeitet von Gunnar Bittersmann 28.01.2017 01:47 @@Sanddorn22 > Fehler im Quelltext? Ja, du brauchst für jede Schriftart eine eigene `@font-face`-Regel. Außerdem sollten Webfonts als WOFF und WOFF2 (besser komprimiert) vorliegen. Wandle die Schriften in diese Formate um (sofern die Lizenz das nicht verbietet). > Übersehe ich etwas anderes? Auch das. > font-size: 12px; 12px ist viel zu klein, um gut gelesen werden zu können. > line-height: 17px; Gib die Zeilenhöhe immer im Verhältnis zur Schriftgröße an, niemals in px. Ansonsten laufen die Zeilen ineinander, wenn der Nutzer die Schrift vergrößert. (Was er bei 12px unweigerlich tun muss.) > text-align:justify; Blocksatz ist fürs Web ungeeignet. Die unterschiedlich breiten Leerräume machen den Text schlecht lesbar. > ~~~html > <html> > ~~~ `<!DOCTYPE html>`{: .language-html}-Angabe fehlt. Ansonsten schalten Browser in den Quirkmodus. 💩 Im `<html>`{: .language-html}-Tag ist die [Sprache des Seiteninhalts anzugeben](https://www.w3.org/International/questions/qa-html-language-declarations), [wichtig](https://www.w3.org/International/questions/qa-lang-why) für Screenreader, Silbentrennung, Rechtschreibprüfung u.a. Für deutsch: `<html lang="de">`{: .language-html} > ~~~html > <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> > ~~~ Das kannst du kürzer haben: `<meta charset="iso-8859-1">`{: .language-html} Als Zeichencodierung solltest du aber besser [UTF-8 verwenden](https://www.w3.org/International/questions/qa-choosing-encodings). > ~~~html > <meta http-equiv="content-style-type" content="text/css"> > ~~~ Kann weg. > ~~~html > <meta http-equiv="content-language" content="de"> > ~~~ Kann weg. Angabe der Sprache wie oben gesagt. > ~~~html > <h1>Hier erscheint die mit font-face gestaltete Überschrift</h1> > ~~~ Es gibt [keinen Grund](https://www.w3.org/International/questions/qa-escapes), Umlaute zu verstümmeln. LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)
Schrift mit @font-face einbinden: Wo ist der Fehler? bearbeitet von Gunnar Bittersmann 28.01.2017 11:17 @@Sanddorn22 > Fehler im Quelltext? Ja, du brauchst für jede Schriftart eine eigene `@font-face`-Regel. Außerdem sollten Webfonts als WOFF und WOFF2 (besser komprimiert) vorliegen. Wandle die Schriften in diese Formate um (sofern die Lizenz das nicht verbietet). > Übersehe ich etwas anderes? Auch das. > font-size: 12px; 12px ist viel zu klein, um gut gelesen werden zu können. > line-height: 17px; Gib die Zeilenhöhe immer im Verhältnis zur Schriftgröße an, niemals in px. Ansonsten laufen die Zeilen ineinander, wenn der Nutzer die Schrift vergrößert. (Was er bei 12px unweigerlich tun muss.) > text-align:justify; Blocksatz ist fürs Web ungeeignet. Die unterschiedlich breiten Leerräume machen den Text schlecht lesbar. > ~~~html > <html> > ~~~ `<!DOCTYPE html>`{: .language-html}-Angabe fehlt. Ansonsten schlaten Browser in den Quirkmodus. 💩 Im `<html>`{: .language-html}-Tag ist die [Sprache des Seiteninhalts anzugeben](https://www.w3.org/International/questions/qa-html-language-declarations), [wichtig](https://www.w3.org/International/questions/qa-lang-why) für Screenreader, Silbentrennung, Rechtschreibprüfung u.a. Für deutsch: `<html lang="de">`{: .language-html} > ~~~html > <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> > ~~~ Das kannst du kürzer haben: `<meta charset="iso-8859-1">`{: .language-html} Als Zeichencodierung solltest du aber besser [UTF-8 verwenden](https://www.w3.org/International/questions/qa-choosing-encodings). > ~~~html > <meta http-equiv="content-style-type" content="text/css"> > ~~~ Kann weg. > ~~~html > <meta http-equiv="content-language" content="de"> > ~~~ Kann weg. Angabe der Sprache wie oben gesagt. > ~~~html > <h1>Hier erscheint die mit font-face gestaltete Überschrift</h1> > ~~~ Es gibt [keinen Grund](https://www.w3.org/International/questions/qa-escapes), Umlaute zu verstümmeln. LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)
Schrift mit @font-face einbinden: Wo ist der Fehler? bearbeitet von Gunnar Bittersmann 28.01.2017 01:48 @@Sanddorn22 > Fehler im Quelltext? Ja, du brauchst für jede Schriftart eine eigene `@font-face`-Regel. Außerdem sollten Webfonts als WOFF und WOFF2 (besser komprimiert) vorliegen. Wandle die Schriften in diese Formate um (sofern die Lizenz das nicht verbietet). > Übersehe ich etwas anderes? Auch das. > font-size: 12px; 12px ist viel zu klein, um gut gelesen werden zu können. > line-height: 17px; Gib die Zeilenhöhe immer im Verhältnis zur Schriftgröße an, niemals in px. Ansonsten laufen die Zeilen ineinander, wenn der Nutzer die Schrift vergrößert. (Was er bei 12px unweigerlich tun muss.) > text-align:justify; Blocksatz ist fürs Web ungeeignet. Die unterschiedlich breiten Leerräumen machen Text schlecht lesbar. > ~~~html > <html> > ~~~ `<!DOCTYPE html>`{: .language-html}-Angabe fehlt. Ansonsten schlaten Browser in den Quirkmodus. 💩 Im `<html>`{: .language-html}-Tag ist die [Sprache des Seiteninhalts anzugeben](https://www.w3.org/International/questions/qa-html-language-declarations), [wichtig](https://www.w3.org/International/questions/qa-lang-why) für Screenreader, Silbentrennung, Rechtschreibprüfung u.a. Für deutsch: `<html lang="de">`{: .language-html} > ~~~html > <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> > ~~~ Das kannst du kürzer haben: `<meta charset="iso-8859-1">`{: .language-html} Als Zeichencodierung solltest du aber besser [UTF-8 verwenden](https://www.w3.org/International/questions/qa-choosing-encodings). > ~~~html > <meta http-equiv="content-style-type" content="text/css"> > ~~~ Kann weg. > ~~~html > <meta http-equiv="content-language" content="de"> > ~~~ Kann weg. Angabe der Sprache wie oben gesagt. > ~~~html > <h1>Hier erscheint die mit font-face gestaltete Überschrift</h1> > ~~~ Es gibt [keinen Grund](https://www.w3.org/International/questions/qa-escapes), Umlaute zu verstümmeln. LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)
nicht angemeldet nicht angemeldet
