The third font in the font family is much larger

Question

For my website, I decided to use some rather obscure fonts in my font family. The most famous font (the third in the family) is Century Gothic, which has most computers.

font-family:Tw Cen MT,Gill Sans,Century Gothic,sans-serif;

The problem is that the 12px font in the Gothic century is much larger than the 12px font in Tw Cen MT and Gill Sans. If the computer crashes on Century Gothic, the fonts will be messy. I NEED a jQuery solution that says gothic gothic will have a font size of 75% of the normal value. I do not need to detect fonts. I just need to say that if gotchi is used, make the font size 75% of the normal value. Any solutions?

Answer 1

I think the problem is the relatively high height of the 10th century Gothic. Try using exunits in your ad font-size. exunits are based on height, in contrast em, pxand pt.

Setting the size line-heightto pixel will also help normalize the height, but will cause problems for users who change the zoom level of the text in their browser.

Edit: I came back and tested, but the ex units did not help. Century Gothic is taller and taller than others.

, DOM , , CSS ( ) .

JQuery . , , .

, , , , .

:

<style>
   p { font-size: 15pt; 
       font-family:"Tw Cen MT","Gill Sans","Century Gothic",sans-serif;
     }
   p#testwidth {
     /* Ensure test is invisible and isn't messed up with borders, etc. */
     margin:0; padding:0; border:none; color:white; display:inline;
     }
</style>

<p>Your text goes here.</p>
<p id="testwidth">m</p>

<script language="Javascript">
   window.onload = function() {
      // Same as your default CSS for font-size (just the number, not the units)
      var desiredFontSize = 15; 
      // Experiment by testing width when Tw Cen MT *is* available. In pixels. 
      var expectedWidth = 17;
      // width found will depend which font is available
      var testedWidth = $('#testwidth').width();
      // ratio, rounded to one decimal point
      var normalizedFontSize = Math.round( 
             expectedWidth / testedWidth * desiredFontSize * 10) / 10;
      // change the stylesheet to "fix" the font size (in your preferred units)
      $('p').css('font-size', normalizedFontSize + 'pt');
      }

:

• . .. , .
• , , . , .
• , , IE , . .
• "m". , , ( ). .

Answer 2

, .

http://24ways.org/2006/compose-to-a-vertical-rhythm

, http://www.lalit.org/lab/javascript-css-font-detect .

- ( ), , . .

Answer 3

Theres a script lalit.org, , .

, , , Century Gothic, , , .

• http://www.lalit.org/lab/javascript-css-font-detect