令和元年ベストのfont-familyはこれだ / Better font-family 2019 in Japanese

4b7124f2f5989173c8ce3b0934817a32?s=47 Yasunobu Ikeda
December 13, 2019

令和元年ベストのfont-familyはこれだ / Better font-family 2019 in Japanese

🦠🦠🦠このスライドの内容の更新して記事にしたので、ICS MEDIAのほうを参照ください🦠🦠🦠
2020年に最適なfont-familyの書き方 - ICS MEDIA
https://ics.media/entry/200317/

---

OSやブラウザのアップデートによりウェブサイトのフォントは影響を受けてきました。最近だとiOS 13 Safariでフォントが激太りを起こしたり、macOS CatalinaとChromeの組み合わせで明朝体化するウェブサイトが多発しました。

他にも「MS Pゴシック」の呪縛、「游ゴシック」の薄さ問題、アンチエイリアスの変化など問題はつきません。このライトニングトークでは、現代の最適解としてのフォント指定を紹介します。

Website fonts have been affected by OS and Browser updates. Recently, iOS 13.0 Safari has caused a lot of fonts problems, and there have been many websites that appear serif fonts in macOS Catalina and Chrome.

There are other problems such as “MS P Gothic” , “Yu Gothic” thinness problems, and antialias fonts changes. In this Lightning Talk, we will introduce font specification as the optimal solution for today.

4b7124f2f5989173c8ce3b0934817a32?s=128

Yasunobu Ikeda

December 13, 2019
Tweet

Transcript

  1. DIST.30 CSS ICS 12 13 font-family

  2. (Yasunobu Ikeda) ICS / @clockmaker

  3. None
  4. /* ⽇本語指定 */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",

    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; /* ボールド指定 */ font-weight: 600;
  5. None
  6. None
  7. None
  8. None
  9. OS

  10. sans-serif

  11. 2017 Windows Chrome 56 Firefox 57 sans-serif 2017 1 (Chrome)

    2017 8 (Firefox) sans-serif sans-serif
  12. None
  13. ( ) Windows macOS Windows ( HiDPI ) macOS iOS

  14. None
  15. None
  16. 2017 font-weight: 400 @font-face font-weight: 500 normal Chrome 62 2017

    10 @font-face
  17. UI Windows 10 : Yu Gothic UI Windows 8.1 :

    Segoe UI Meiryo font-family: system-ui
  18. : /* ⽇本語指定 */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino

    Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; /* ボールド指定 */ font-weight: 600;
  19. None
  20. 2019 macOS Catalina Chrome sans-serif 2019 10 sans-serif

  21. None
  22. None
  23. None
  24. mac OS Catalina × Chrome sans-serif sans-serif

  25. Hiragino Sans Hiragino Sans /* ⽇本語指定 */ font-family: -apple-system, BlinkMacSystemFont,

    "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; /* ボールド指定 */ font-weight: 600;
  26. None
  27. 2019 iOS 13 Safari 2019 9

  28. None
  29. None
  30. iOS 13 Safari sans-serif Hiragino Sans iOS Hiragino Sans W3,

    W6, W8 font-weight: bold; 700 Hiragino Sans W8
  31. font-weight: 600; /* ⽇本語指定 */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",

    "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; /* ボールド指定 */ font-weight: 600; iOS 13.1 W8 W7
  32. BlinkMacSystemFont SF Display Pro Hiragino Sans macOS Hiragino Sans (100

    900) font-weight: 600; macOS Catalina × Chrome 79
  33. None
  34. 2018 macOS Mojave Retina Retina 2018 9

  35. None
  36. None
  37. None
  38. None
  39. None
  40. Twitter @clockmaker Copyright 2019 ICS INC. All rights reserved.