<h1>This is a heading.</h1>
<p>Lorem ipsum sit dolor.</p>
:root{
font:-apple-system-body;
}
@supports (font:-apple-system-body) and (not(-webkit-touch-callout:default)){
/* Prevents Desktop Safari from setting size to 13px when -apple-system-body is set. Manually set to default 16px, as there is no way a user can set the Safari desktop font size default anyways. Which is a shame honestly. */
/* Oh, by the way, that @supports line is a brand new CSS hack I invented for this to target Desktop Safari specifically */
:root{font-size:16px}
}
/* --------------- END OF SCALING CODE --------------- */
:root{
padding:3ex 3ch;
font-family:serif; /* Custom font families can be set here */
}
h1{margin-block-start:0}
// JUST TO SHOW WHAT SYSTEM IS SETTING, NOTHING TO DO WITH THE CSS
function ready(callbackFunc) {
if (document.readyState !== 'loading'){
callbackFunc();
} else {
document.addEventListener('DOMContentLoaded', callbackFunc);
}
}
ready(function() {
$('h1').append("<span> ("+$("h1").css('font-size')+")</span>");
$('p').append("<span> ("+$("p").css('font-size')+")</span>");
});
This Pen doesn't use any external CSS resources.