PHP
EN
@supports and @font-face troubles
[]
phpied.com
I've been crafting a nice font-face fallback, something like this:@font-face { font-family: fallback; src: local('Helvetica Neue'); ascent-override: 85%; descent-override: 19.5%; line-gap-override: 0%; size-adjust: 106.74%; }It works well, however Safari doesn't yet support ascent-override , descent-override , nor line-gap-override in @font-face blocks.
It does support size-adjust though.
I wanted to use @supports in CSS to keep everything nice and compact.
Unfortunately, turns out that for example both@supports (ascent-override: normal) {/* css here */}and@supports (size-adjust: 100%) {/* css here */}end up with the "css here" not being used.
Using the JavaScript API I get this in Chrome, Safari and Firefox:console.log(CSS.supports('font-stretch: normal')); // true console.log(CSS.supports('font-style: normal')); // true console.log(CSS.supports('font-display: swap')); // false console.log(CSS.supports('size-adjust: 100%')); // false console.log(CSS.supports('ascent-override: normal')); // falseHuh?
['true'
'troubles'
'fontface'
'normal'
'supports'
'css'
'ascentoverride'
'sizeadjust'
'javascript'
'support'
'safari']