OpenType features

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

Transcript

1. OPENTYPE
   FEATURES
   

   View Slide

2. FONT-FORMA
   TE
   

   View Slide

3. TrueType (.
   ttf)
   OpenType (.
   ttf
   , .otf)
   EOT
   , WOFF
   , WOFF 2
   V
   ariable fonts
   

   View Slide

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')
   }
   

   View Slide

5. WOFF
   Weg mit den
   ollen Font-Formaten!
   

   View Slide

6. View Slide

7. LIGATUREN
   

   View Slide

8. COMMON LIGATURES
   DISCRETIONARY LIGATURES
   

   View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. Bei gebrochenen Schriften werden im Deutschen
    die Zwangsligaturen ch, ck, ſt und tz sowie der
    Buchstabe ß nicht aufgelöst. (Wikipedia: Sperrsatz)
    

    View Slide

14. ZahlEN
    

    View Slide

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

    View Slide

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
    

    View Slide

17. T-Mobile.pl
    

    View Slide

18. View Slide

19. View Slide

20. STILISTISCHE & LOKALE
    varian ten
    

    View Slide

21. Stylistic alternates & stylesets
    Swashes
    Localized forms
    

    View Slide

22. View Slide

23. View Slide

24. View Slide

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');
    }
    

    View Slide

26. ERWERBSREGEL 3:
    Gib niemals mehr für einen Erwerb aus
    als es unbedingt sein muss.
    

    View Slide

27. ERWERBSREGEL 239:
    Hab keine Angst davor,
    ein Produkt falsch zu etikettieren.
    

    View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. топла вода
    тёплая вода
    topla voda
    teplá voda
    ciepła woda
    тепла вода
    цёплая вада
    ćopła woda
    cepła wòda
    śopła wóda
    

    View Slide

34. View Slide

35. Foto: Bratkrk CC BY-SA 3.0
    

    View Slide

36. View Slide

37. View Slide

38. ݴޠ
    

    View Slide

39. ݴޠ
    
    ⋮ ⋮
    言語 語言
    

    View Slide

40. KAPITÄLCHEN
    

    View Slide

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
    

    View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. TIL
    über das große ẞ
    

    View Slide

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

    View Slide

49. View Slide