Set a Font Specifically for All Numbers on the Page

Set a font specifically for all numbers on the page

You can do it in JavaScript relatively simply by traversing the document so that you wrap any sequence of digits in a span element with a class attribute and declare font-family for it in CSS.

It’s possible in principle in pure CSS, too, though only WebKit browsers currently support this:

@font-face {
  font-family: myArial;
  src: local("Courier New");
  unicode-range: U+30-39;
}
@font-face {
  font-family: myArial;
  src: local("Arial");
  unicode-range: U+0-2f, U+40-10FFFF;
}
body { font-family: myArial; }

Finally, and most importantly, don’t do it. If you are dissatisfied with digits in a font, don’t use that font.

Setting font-size for all text except h1 h2 etc

Use the :not selector with those "unwanted" elements:

.mybox *:not(h1):not(h2):not(h3) {  font-size: 13px;}

<div class="mybox">  <h1>foo</h1>  <h2>bar</h2>  <h3>Hans</h3>  <label>Gruber</label>  <p>Goku</p>  <div>Yoda</div></div>

Can I set font-size relative to page size?

No you cannot set the size of the font in a percentage relative to the size of the page.

Sizing in em is based on the size relative to how the font would normally render in 16 point.

If you'd like your page to scale up and down and keep some sort of scale to itself, the boxes and the font, then setting it out in em would be fine.

That method will allow for the scaling of fonts and boxes of the page to grow at a relative size to one another and hopefully not have things falling out of bounds and borders.

---

Related Topics