Now Reading
Font-face toggler bookmarklet / Stoyan’s phpied.com

Font-face toggler bookmarklet / Stoyan’s phpied.com

2024-01-14 14:01:14

Ever needed to take a look at your web page and switch Net Fonts on and off? Expertise the format shift repeatedly, like some form of UX torture? Look no additional, right here comes the helpful bookmarklet.

Set up

Drag this hyperlink to a bookmark toolbar close to you:

msg.push(document.styleSheets.item(idx).href));alert(msg.join(‘nn’));}})()”>toggle fonts

Use

Go to a page with web fonts and click to toggle. Like so:

Source

The idea is you go through all stylesheets and mess with the fontFamily of @font-face rules. Simple. Stash them as fontFamiliar for ease of toggling back.

const errors = [];
for (let s = 0; s < doc.styleSheets.size; s++) {
  let guidelines = [];
  attempt {
    guidelines = doc.styleSheets.merchandise(s).guidelines;
  } catch (_) {
    errors.push(s);
  }
	
  for (let i = 0; i < guidelines.size; i++) {
    const rule = guidelines.merchandise(i);
    if (rule.constructor.identify === 'CSSFontFaceRule') {
      if (rule.fashion.fontFamiliar) {
        rule.fashion.fontFamily = rule.fashion.fontFamiliar;
        delete rule.fashion.fontFamiliar;
      } else {
        rule.fashion.fontFamiliar = rule.fashion.fontFamily;
        rule.fashion.fontFamily = '';
      }
    }
  }  
}
if (errors.size && !window.__fontfacetogglererror) {
  window.__fontfacetogglererror = true;
  const msg = ['Could not access these stylesheets:'];
  errors.forEach(idx => msg.push(doc.styleSheets.merchandise(idx).href));
  alert(msg.be a part of('nn'));
}

Limitations

When the stylesheets are usually not accessible by doc.styleSheets API (e.g. on a 3rd celebration area, what!?), we can not mess with them. However we are able to report their URLs nonetheless. Solely the primary time although, an excessive amount of in any other case.

Format shift helper

Desire a format shift monitor to go together with your toggle? Paste this into the console earlier than you go toggling:

new PerformanceObserver((record) => {
  let cls = 0;
  for (const entry of record.getEntries()) {
    cls += entry.worth;
  }
  console.log(cls);
}).observe({sort: 'layout-shift'});


Inform your folks about this submit on
Facebook and
Twitter

See Also

Sorry, feedback disabled and hidden as a consequence of extreme spam.



Source Link

What's Your Reaction?
Excited
0
Happy
0
In Love
0
Not Sure
0
Silly
0
View Comments (0)

Leave a Reply

Your email address will not be published.

2022 Blinking Robots.
WordPress by Doejo

Scroll To Top