Upgrade to Pro — share decks privately, control downloads, hide ads and more …

OpenType features

OpenType features

Eine Auswahl von OpenType-Features in CSS:
- Font-Formate
- Ligatuten
- Zahlen
- Stilistische und lokale Alternativen
- Kapitälchen

051dbe29a972707cde167602b38c9778?s=128

Gunnar Bittersmann

May 07, 2021
Tweet

Transcript

  1. OPENTYPE FEATURES

  2. FONT-FORMA TE

  3. TrueType (. ttf) OpenType (. ttf , .otf) EOT ,

    WOFF , WOFF 2 V ariable fonts
  4. @font-face { font-family: 'What The Font'; font-weight: normal; font-style: normal;

    src: url('wtf.eot'); src: url('wtf.eot?#iefix') format('embedded-opentype'), url('wtf.woff2') format('woff2'), url('wtf.woff') format('woff'), url('wtf.ttf') format('truetype'), url('wtf.svg#wtf') format('svg') }
  5. WOFF Weg mit den ollen Font-Formaten!

  6. None
  7. LIGATUREN

  8. COMMON LIGATURES DISCRETIONARY LIGATURES

  9. None
  10. None
  11. None
  12. None
  13. Bei gebrochenen Schriften werden im Deutschen die Zwangsligaturen ch, ck,

    ſt und tz sowie der Buchstabe ß nicht aufgelöst. (Wikipedia: Sperrsatz)
  14. ZahlEN

  15. oldstyle vs. lining proportional vs. tabular ordinal fractions subscripts slashed

    zero
  16. font-family: Abril Text font-family: Abril Text; font-variant-numeric: lining-nums tabular-nums font-family:

    Abril Display; font-variant-numeric: lining-nums tabular-nums
  17. T-Mobile.pl

  18. None
  19. None
  20. STILISTISCHE & LOKALE varian ten

  21. Stylistic alternates & stylesets Swashes Localized forms

  22. None
  23. None
  24. None
  25. @font-face { font-family: 'What The Font'; font-weight: normal; font-style: normal;

    src: url('wtf.woff2') format('woff2'); } @font-face { font-family: 'What The Font'; font-weight: normal; font-style: italic; src: url('wtf-italic.woff2') format('woff2'); }
  26. ERWERBSREGEL 3: Gib niemals mehr für einen Erwerb aus als

    es unbedingt sein muss.
  27. ERWERBSREGEL 239: Hab keine Angst davor, ein Produkt falsch zu

    etikettieren.
  28. None
  29. None
  30. None
  31. None
  32. None
  33. топла вода тёплая вода topla voda teplá voda ciepła woda

    тепла вода цёплая вада ćopła woda cepła wòda śopła wóda
  34. None
  35. Foto: Bratkrk CC BY-SA 3.0

  36. None
  37. None
  38. ݴޠ 

  39. ݴޠ  <html lang="ja"> <html lang="zh-Hans"> ⋮ ⋮ &#x8A00;&#x8A9E; &#x8A9E;&#x8A00;

  40. KAPITÄLCHEN

  41. A C P S T O S M A L

    L C A P S S M A L A L S P C
  42. None
  43. None
  44. None
  45. None
  46. None
  47. TIL über das große ẞ

  48. photo: Yevgeny Khaldei, source: mil.ru, CC BY 4.0

  49. None