CSS：如何为每种字体设置不同的大小

Posted 2023-03-06

【中文标题】CSS：如何为每种字体设置不同的大小

【英文标题】：CSS: how to have different sizes for each font

【发布时间】：2011-03-05 20:17:11

【问题描述】：

我有一个使用“arial narrow”的网站。为了避免兼容性问题，我使用“Font Squirrel”字体生成器（http://www.fontsquirrel.com）制作了该字体的@font-face 版本，但是当我使用的系统没有本机“Arial Narrow”和然后通过@font-face在线加载，字体大于原生“Arial Narrow”；我对字体使用绝对大小（以 px 为单位）。

有没有办法为本地和在线字体设置不同的大小？

@font-face 
font-family: 'ArialNarrow';
src: url('/fonts/arialn-webfont.eot');
src: local('☺'), url('/fonts/arialn-webfont.woff') format('woff'), url('/fonts/arialn-webfont.ttf') format('truetype'), url('/fonts/arialn-webfont.svg#webfontNZumFher') format('svg');
font-weight: normal;
font-style: normal; 

及以下：

font-family: 'Arial Narrow', 'ArialNarrow', arial, helvetica, sans-serif;
font-size:14px;

提前谢谢，对不起我的英语不好

【参考方案1】：

理论上，CSS 2.0 和 CSS 3 属性 font-size-adjust 是为此用途而创建的，但它的支持很弱。没有 IE（惊喜！），Fx 3.0+ 和 afaik 在 Saf 4 中没有支持，也没有 Op 10.5。

我想知道为什么 Arial Narrow 的尺寸不一样（并且没有答案），但我想指出 Arial Narrow 是由 Ascender to Microsoft 授权的，可以在这里购买：http://www.fontslive.com/font/arial-narrow-regular.aspx（还有这个浓缩系列由 Monotype 创建）。 对于非商业网站http://en.wikipedia.org/wiki/Core_fonts_for_the_Web 表示为时已晚（2002 年），并且包应该保留其原始格式和文件名：嵌入修改了前者。

【参考方案2】：

抱歉，有人提出了类似的问题，但结论始终是“无法完成”（至少跨浏览器不可靠，感谢 @Felipe 提出这些 CSS 属性 - 不知道它们）。

即使使用 javascript 也很困难，因为最终很难找出浏览器实际使用了哪种字体。

另请参阅：Get computed font-family in JavaScript