令和元年ベストの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の組み合わせで明朝体化するウェブサイトが多発しました。

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

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.

Transcript

1. DIST.30 CSS ICS 12 13 font-family
2. (Yasunobu Ikeda) ICS / @clockmaker
4. /* ⽇本語指定 */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; /* ボールド指定 */ font-weight: 600;
9. OS
10. sans-serif
11. 2017 Windows Chrome 56 Firefox 57 sans-serif 2017 1 (Chrome) 2017 8 (Firefox) sans-serif sans-serif
13. ( ) Windows macOS Windows ( HiDPI ) macOS iOS
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;
20. 2019 macOS Catalina Chrome sans-serif 2019 10 sans-serif
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;
27. 2019 iOS 13 Safari 2019 9
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
34. 2018 macOS Mojave Retina Retina 2018 9
40. Twitter @clockmaker Copyright 2019 ICS INC. All rights reserved.