Switching font-family while retaining width

Question

Is it possible to keep the exact width of a <span> while changing the font-family of the text inside ? I am thinking about balancing this width with font-size or font-size-adjust because letter-spacing will not render gracefully.

I chose deliberately two very different typefaces: Times and Verdana.

Rollover the demo: http://jsbin.com/ahiba4/20

score 1 · Accepted Answer · edited May 23 '17 at 11:55

1

It is possible, but only using JavaScript.

Store the container's width in a variable
Change the font in the container
Set the font size so the container matches the previous width again using one of the methods shown in these questions:
- How to auto resize text in fixed DIV according to the text's length?
- JavaScript Scale Text to Fit in Fixed Div (this is the best one IMO)

edited May 23 '17 at 11:55

Community

1
1

answered Apr 07 '11 at 14:20

Pekka

442,112
142
972
1,088

Your answer is correct, but you're only going to come close to the same width (less than or equal). Font sizes are integers. – Gilbert Le Blanc Apr 07 '11 at 15:13
@Gilbert true, good point. There is likely to be a few pixels' deviation. – Pekka Apr 07 '11 at 15:16

Switching font-family while retaining width

1 Answers1