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

Question

对于我的website，我选择在我的字体系列中使用一些非常晦涩的字体。最著名的字体（家族中的第 3 种）是 Century Gothic，大多数计算机都有。

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

问题是 Century gothic 中的 12px 字体远大于 Tw Cen MT & Gill Sans 中的 12px 字体。如果计算机重新使用 Century Gothic，字体将一团糟。我需要一个 Jquery 解决方案，说明 Century gothic 的字体大小为正常值的 75%。我不需要它来检测字体。我只想说，如果使用的是世纪哥奇，请将字体大小设置为正常值的 75%。有什么解决办法吗？

Answer 1

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

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

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

Answer 2

我认为问题在于 Century Gothic 相对较高的 x 高度。尝试在您的 font-size 声明中使用 ex 单位。 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

如果您按垂直节奏作曲，这应该不会造成太大问题。

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

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

我真的建议尽可能使用第一种方法（垂直节奏）来使整个问题变得无关紧要。晚上你会睡得更好。