edwardtufte / tufte-css

Style your webpage like Edward Tufte’s handouts.
https://edwardtufte.github.io/tufte-css/
MIT License
5.98k stars 458 forks source link

set font-display: swap as default #148

Closed HereChen closed 5 years ago

HereChen commented 5 years ago

Font loading has a performance issue. And set font-display: swap is not possible with CDN.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tufte-css@1.6.0/tufte.min.css">

image

Is it possible to set font-display: swap as default?

@font-face {
     ...
+    font-display: swap;
}

see also Suggestion: Implement font-display, Ensure text remains visible during webfont loads.

daveliepmann commented 5 years ago

How would this change affect browsers that don't support this feature?

HereChen commented 5 years ago

@daveliepmann

This change has no effects on browsers that don't support it.

So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and ignore as appropriate) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported property values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored. Partial Implementations

https://css-tricks.com applied this feature even though IE 11 does not support font-display.

image

This article font-display for the Masses may help you understand the problems font-display solved.

daveliepmann commented 5 years ago

See #119 for prior report.

daveliepmann commented 5 years ago

Thanks for the recommendation; we're trying it out.