Question

对于我的website，我选择在我的字体系列中使用一些非常模糊的字体。最着名的字体（家庭中的第3个）是Century Gothic，大多数计算机都有。

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

问题是世纪哥特式的12px字体远远大于Tw Cen MT＆amp; 12中的12px字体。吉尔桑斯。如果计算机依赖于Century Gothic，那么字体就会变得一团糟。我需要一个Jquery解决方案，说世纪哥特式的字体大小是正常值的75％。我不需要它来检测字体。我只需要它说，如果使用世纪gotchi，使字体大小为正常值的75％。任何解决方案？

Answer 1

如果你构成垂直节奏，这不应该造成很大的问题。

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

这完全是矫枉过正，但您可以使用http://www.lalit.org/lab/javascript-css-font-detect并创建条件。

我真的建议使用像第一种方法（垂直节奏）这样的东西来使整个问题尽可能无关紧要。你晚上睡得好多了。

Answer 2

我认为这个问题是世纪哥特式的相对较高的x高度。尝试在ex声明中使用font-size个单元。 ex单位基于身高，与em，px和pt不同。

将line-height设置为像素大小也有助于规范高度，但会对在浏览器中更改文本缩放级别的用户造成问题。

编辑：我回去测试了，前单位没有帮助。 Century Gothic比其他人更高更宽。

问题是，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 3

lalit.org上有一个脚本，用于猜测用户机器上可用的字体。

您可以使用它来查看是否正在使用Century Gothic，如果是这样，请加载一个额外的样式表来修改您的字体大小。

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

字体系列中的第三个字体明显更大

3 个答案: