diff options
| author | jeffreytse <jeffreytse.mail@gmail.com> | 2021-06-28 17:31:53 +0800 |
|---|---|---|
| committer | jeffreytse <jeffreytse.mail@gmail.com> | 2021-06-28 17:31:53 +0800 |
| commit | 5c4c473b88e0734e7221bbd06fe875a64b99b65d (patch) | |
| tree | acd7377b783c1b47c125a59d876dff5578b18a76 | |
| parent | 351f3200273eb5f3c93467fa3d56586366384132 (diff) | |
feat: ensure text remains visible during webfont load
The easiest way to avoid showing invisible text while custom fonts
load is to temporarily show a system font. By including
`font-display: swap` in your font style. It's worth mentioning that
not all major browsers support font-display: swap, so you may need
to do a bit more work to fix the invisible text problem.
| -rw-r--r-- | _sass/yat/_base.scss | 1 |
1 files changed, 1 insertions, 0 deletions
diff --git a/_sass/yat/_base.scss b/_sass/yat/_base.scss index 224c287..1c60a9a 100644 --- a/_sass/yat/_base.scss +++ b/_sass/yat/_base.scss @@ -17,6 +17,7 @@ body { font-family: $base-font-family; font-weight: $base-font-weight; font-size: #{$base-font-size}; + font-display: swap; line-height: #{$base-line-height}; color: $text-color; background-color: $background-color; |