font lists / font perf #197
Comments
|
win11 new fonts So which ones are font-families and which ones are faces? @abrahamjuliot Do you have access to a Win11 machine with these fonts? |
|
I'm seeing these as font families here. Matches my machine too. macOS Monterey fonts are now published. They are each Google Fonts. https://support.apple.com/en-us/HT212587 |
|
hmmm, that's weird .. doesn't seem to match other font naming conventions. Regular, you drop the e.g. Do you actually have these in |
|
correction: I'm confused. If I run this in Chrome, I get the above returned as font families console.log(await queryLocalFonts().then(fonts => [...new Set(fonts.map(font => font.family))].join('\n')))Powershell also returns Font folder |
|
FF Nightly RFP Chrome only works with "...Display" added |
right, there is no such font as |
|
wow, so nothing was detected from all of these ... yikes, WTF is going on |
|
Yeah, it seems these are not available apart from CSS Font Loading API. |
|
Not even I was planning on using the CSS Font Loading API to get win versions - I think you said it was super fast |
|
that's some sweet perf on that mini vid bro. 90ms (with the console open, on nightly which is slower). I'm around 135 nightly and 125 stable - it's approx 50/50 between glyphs/textmetrics + fonts sizes - and that's on a 12yr old machine |
Nice, I missed that. It's a custom tower. I think the fastest I can get on TZP is
Yep, missing. Same in Chrome.
It's fast, doesn't touch the DOM, and runs asynchronous. function getLocalFontFamily(font) {
return new FontFace(font, `local("${font}")`)
.load()
.then((font) => font.family)
.catch(() => null)
}
function loadFonts(fontList) {
return Promise.all(fontList.map(getLocalFontFamily))
.then(list => list.filter(font => font !== null))
}
loadFonts(['Segoe Fluent Icons']).then(fonts => console.log(fonts)) |
Great that it doesn't touch the DOM etc .. but this is not fast. I piped the default windows list of 219 fonts thru it and it took approx 200ms - but sure, on a few select fonts for extra entropy this can come in handy. By comparison, the getDimensions and touching the DOM takes approx 60ms, including an additional 10 base fonts and number crunching everything into pretty objects for FP storage |
|
It should speed up the overall script if run in a Promise.all([
doSomeDomWork() // blocks other dom work or non-async operations (200ms)
getFontFace() // runs in the event loop while doSomeDomWork() is running (200ms)
getDomFonts() // waits for doSomeNonAsyncTask() to finish (50ms)
])
// Overall time to complete ~250ms |
posting so I have a record somewhere
currently
WINDOWS - isPlatformFont (single pass vs MS Shell Dlg \32 )
todo:
MAC - isPlatformFont (single pass vs -apple-system)
todo:
LINUX
currently checks against 3 basefonts (but skips subsequent basefonts if already detected). And super large list sucks. It needs a clean out. I wonder if we could try and detect a known common font from a select list (not noto, we want as unique a size as possible) and use the first found of those so we can do a single pass
todo:
all fonts listed are expected so will be found on the first basefont anyway = same as a single passnot quite true, most fonts will be found on the first pass, and if I know Noto fonts from android, it takes all three basefonts to get everythingANDROID
currently checks against 3 basefonts (but skips subsequent basefonts if already detected). It's not so bad at 140 fonts: e.g. my android finds 105 total: 100 or so on the first baseFont. But android is slow so anything here is a large gain
todo
reminder
to build a test page to compare three pass detected to single pass detected
use this page to also output the size buckets
The text was updated successfully, but these errors were encountered: