OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to imitate a monospace font with a variable-width font?

  • Thread starter Thread starter Basj
  • Start date Start date
B

Basj

Guest
(Edit: I only need this for the 10 digits 0..9, can I hardcode the letter width for each one of the 10 digits in the CSS file?)

I have read CSS - Make sans-serif font imitate monospace font but the CSS rule letter-spacing doesn't seem to be enough:

enter image description here

How to imitate a monospace fixed font from a standard sans-serif font?

This doesn't work perfectly:


Code:
.text {
  font-family: sans-serif;
  letter-spacing: 10px;
}

Code:
<div class="text">
ABCDEFGHIJKLMNOPQR<br>
STUVWXYZ0123456789
</div>
<p><em>(Edit: I only need this for the 10 digits 0..9, can I hardcode the letter width for each one of the 10 digits in the CSS file?)</em></p>
<p>I have read <a href="https://stackoverflow.com/questions/38625431/css-make-sans-serif-font-imitate-monospace-font">CSS - Make sans-serif font imitate monospace font</a> but the CSS rule <code>letter-spacing</code> doesn't seem to be enough:</p>
<p><a href="https://i.sstatic.net/Aq3Wd.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/Aq3Wd.png" alt="enter image description here" /></a></p>
<p><strong>How to imitate a monospace fixed font from a standard sans-serif font?</strong></p>
<p>This doesn't work perfectly:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.text {
font-family: sans-serif;
letter-spacing: 10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="text">
ABCDEFGHIJKLMNOPQR<br>
STUVWXYZ0123456789
</div></code></pre>
</div>
</div>
</p>
Continue reading...
 

Latest posts

I
Replies
0
Views
1
Isaac P. Liu
I
U
Replies
0
Views
1
user3658366
U
G
Replies
0
Views
1
Giampaolo Levorato
G
M
Replies
0
Views
1
Marcelo Rodrigo Nascimento
M
Top