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

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

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

问题是世纪哥特式的12px字体远远大于Tw Cen MT&Gill Sans的12px字体。 如果一台计算机落后于Century Gothic,那么字体就会变得一团糟。 我需要一个Jquery解决方案,说世纪哥特式的字体大小是正常值的75%。 我不需要它来检测字体。 我只是需要它说,如果使用世纪gotchi,使字体大小为正常值的75%。 有解决方案?

我认为这个问题是世纪哥特式的相对较高的x高度。 尝试在font-size声明中使用ex单位。 ex单位基于高度,与empxpt

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

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

问题是,DOM不允许您从列出的替代品中分辨出用户具有哪种特定字体,并且CSS不允许为每种字体分别设置字体(或调整)。

但是,JQuery 可以测试文本容器的大小。 因此,如果您在页面上提供了一个隐藏元素,其中包含一个已知字母,您可以在用户的​​浏览器上测试该元素的宽度。

由于该字母的宽度将由用户安装的字体确定,因此您可以将该宽度与您自己计算机上首选字体中相同文本的宽度进行比较,并计算与您大致匹配的用户的字体大小意。

示例代码:

  

Your text goes here.

m

四个警告:

  • 它不一定能克服两种替代字体之间的大小差异。 如果没有您喜欢的字体,垂直对齐等可能并不完美。
  • 它可能会使浏览器中设置了默认文本缩放级别的用户感到恼火,因为这会在页面加载时强制执行字体大小。 幸运的是,他们仍然可以根据需要放大或缩小,并覆盖您的强制字体大小。
  • 我似乎记得IE在小数点后有很多数字的字体大小问题,所以我四舍五入。 应该足够接近。
  • 我用了一个字母“m”的宽度。 如果你想要一个更准确的结果,你可以使用更长的字母串, 前提是它不会包裹在用户的浏览器上(这将破坏宽度测试)。 一些大写和小写字母和一个空格应该是一个很好的测试。

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

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

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

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

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

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