In order to ensure that certain elements on my page do not exceed specific widths, it is crucial for me to use a monospaced font. This will limit the horizontal "stride" between characters to stay within a specified threshold.
However, simply setting the font family and width in CSS to achieve this does not always work effectively:
.someclass {
font-family: monospace;
font-width: 13px;
}
Using a more specific list of fonts also does not guarantee consistent results across different browsers:
.someclass {
font-family: consolas, monaco, courier, monospace;
font-width: 13px;
}
The variation in width among fonts can lead to discrepancies in how the text renders, as seen when comparing Chrome and Firefox.
Ultimately, I would like to enforce a stricter font width constraint like so:
.someclass {
font-family: monospace;
font-width: 8px;
}
Unfortunately, it appears that achieving this level of control over font widths using CSS alone may not be possible.
Are there any alternative methods in CSS to set a hard cap on font widths?