Is there a way to make a variable width font act like a fixed width font in HTML?
For example, if I have the sentence, "The quick grey fox jumped over the lazy dog" displayed in "Courier New", a fixed width font, it would be wider overall than if it was in a variable width font like, "Arial". I would like to use "Arial" instead of "Courier New" but have the characters fixed width.
Example of variable width:
The quick grey fox jumped over the lazy dog.
Example of fixed width:
The quick grey fox jumped over the lazy dog
Notice how close the characters are to each other in the word "quick" and "grey" in each example.
The <tt> HTML element creates inline text which is presented using the user agent's default monospace font face. This element was created for the purpose of rendering text as it would be displayed on a fixed-width display such as a teletype, text-only screen, or line printer.
The font-size-adjust property gives you better control of the font size when the first selected font is not available. When a font is not available, the browser uses the second specified font. This could result in a big change for the font size. To prevent this, use the font-size-adjust property.
The system fonts Courier, Menlo, and Consolas are examples of monospaced fonts , so named because every character is the same width.
Not with just CSS. I would recommend you use the popular Lettering.js (you'll need jQuery for it) to generate span
tags around each character, then set an width across all the characters.
.monospace > span { display: inline-block; /* Enable widths */ width: 1em; /* Set width across all characters */ text-align: center; /* Even out spacing */ }
Test Case
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With