令和元年ベストのfont-familyはこれだ / Better font-family 2019 in Japanese
by
Yasunobu Ikeda
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
DIST.30 CSS ICS 12 13 font-family
Slide 2
Slide 2 text
(Yasunobu Ikeda) ICS / @clockmaker
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
/* ⽇本語指定 */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; /* ボールド指定 */ font-weight: 600;
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
OS
Slide 10
Slide 10 text
sans-serif
Slide 11
Slide 11 text
2017 Windows Chrome 56 Firefox 57 sans-serif 2017 1 (Chrome) 2017 8 (Firefox) sans-serif sans-serif
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
( ) Windows macOS Windows ( HiDPI ) macOS iOS
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
2017 font-weight: 400 @font-face font-weight: 500 normal Chrome 62 2017 10 @font-face
Slide 17
Slide 17 text
UI Windows 10 : Yu Gothic UI Windows 8.1 : Segoe UI Meiryo font-family: system-ui
Slide 18
Slide 18 text
: /* ⽇本語指定 */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; /* ボールド指定 */ font-weight: 600;
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
2019 macOS Catalina Chrome sans-serif 2019 10 sans-serif
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
mac OS Catalina × Chrome sans-serif sans-serif
Slide 25
Slide 25 text
Hiragino Sans Hiragino Sans /* ⽇本語指定 */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; /* ボールド指定 */ font-weight: 600;
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
2019 iOS 13 Safari 2019 9
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
iOS 13 Safari sans-serif Hiragino Sans iOS Hiragino Sans W3, W6, W8 font-weight: bold; 700 Hiragino Sans W8
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
BlinkMacSystemFont SF Display Pro Hiragino Sans macOS Hiragino Sans (100 900) font-weight: 600; macOS Catalina × Chrome 79
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
2018 macOS Mojave Retina Retina 2018 9
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
Twitter @clockmaker Copyright 2019 ICS INC. All rights reserved.