logo标签列表

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

jquerycssfontsfont-family
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%。我不需要它检测字体，我只需要让它说：如果正在使用Century Gothic，请将字体大小设为正常值的75%。有什么解决方案吗？
你可以尝试使用百分比大小而不是像素吗？我不确定它是否能解决跨字体大小的问题，但至少可以让所有浏览器都有调整文本大小的选项（一些旧版本的浏览器会死守像素大小，不允许用户调整文本大小）。 - KP.
你可以选择使用JavaScript或不使用该字体。 - BlueRaja - Danny Pflughoeft
什么是一个好的JavaScript解决方案？ - JCHASE11
我找到了一个类似的问题，但仍然没有答案。 https://dev59.com/w3M_5IYBdhLWcg3wslRW - JCHASE11
根据你所说的“更大”，我认为在font-size-adjust中有一个标准的CSS答案：http://www.w3.org/TR/css3-fonts/#relative-sizing-the-font-size-adjust-pro，但它实际上已从CSS 2.1中删除，因为当时没有浏览器去实现它。今天只有Firefox实现了它，我想。 - Jason Orendorff
显示剩余2条评论
3个回答
1
现在大多数浏览器都支持文本像素的缩放，除了IE6以外。 - Bob
0

我认为问题在于Century Gothic相对较高的x高度。尝试在font-size声明中使用ex单位。与em、px和pt不同，ex单位是基于高度的。

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

编辑：我回去测试了一下，发现ex单位并没有起到作用。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”的宽度。如果您想要更准确的结果，可以使用更长的字母字符串，前提是它不会在用户的浏览器上换行（这会破坏宽度测试）。几个大写和小写字母和一个空格应该是一个好的测试。
尝试使用基于em的单位，但问题仍然存在。它只是整体字体更大了x和y。我只需要将其缩小。文本缩放会如何工作？ - JCHASE11
@JCHASE11：重新阅读他说的话。他同意您说的 em 单位不起作用，并建议使用 ex 单位。 - egrunin
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接