IE 和 Firefox 中的文本大小不同

Posted 2023-03-06

【中文标题】IE 和 Firefox 中的文本大小不同

【英文标题】：Text size is different in IE and Firefox

【发布时间】：2011-07-24 15:46:28

【问题描述】：

为什么 IE 中的文本比 Firefox 中的稍大（宽）？ 示例（上为IE如何渲染文本，下为FF）：

Image

在 CSS 中声明为 Arial 16px 的文本。 我知道 IE 中有抗锯齿功能，但它不应该使 IMO 字体更大。是不是这里的情况？它破坏了我的设计，除了减小字体大小我还能做些什么吗？

谢谢！

【问题讨论】：

当涉及到不同的字体大小时，您可能应该让您的设计更加健壮。

【参考方案1】：

使用不同类型的字体文件（eot、woff2、woff、ttf、otf）对我有用。我使用https://onlinefontconverter.com/ 将字体文件转换为我需要的类型，同时也减小了它们的大小。 这是我用来将所有文件转换为 css 的 SCSS mixin：

@mixin font-face($name, $file-name, $weight, $style) 
  $fonts-directory: '/assets/fonts/';
  $src: $fonts-directory + $file-name;

  @font-face 
    font-family: quote($name);
    font-style: unquote($style);
    font-weight: unquote($weight);      
    src: url($src +'.eot');
    src: url($src +'.eot?#iefix')  format('embedded-opentype'),
         url($src +'.woff2')       format('woff2'),
         url($src +'.woff')        format('woff'),
         url($src +'.ttf')         format('truetype'),
         url($src +'.otf')         format('opentype');
  


@include font-face('AmplitudeTF', 'AmplitudeTF-Bold', '700', 'normal');
@include font-face('AmplitudeTF', 'AmplitudeTF-BoldItalic', '700', 'italic');
@include font-face('AmplitudeTF', 'AmplitudeTF-Italic', '400', 'italic');
@include font-face('AmplitudeTF', 'AmplitudeTF-Regular', '400', 'normal');

【讨论】：

您能否解释一下使用不同的字体格式将如何帮助解决这个跨浏览器兼容性问题？另外请从您的答案中删除语法错误。

【参考方案2】：

你试过字体大小调整

示例：字体大小调整：0.47；

【参考方案3】：

还可以尝试为无衬线等显式设置font-family 属性的“第二部分”：

字体系列：Arial，无衬线；

如果是抗锯齿，IE中没有CSS设置可以改变这个。此外，操作系统可能会影响字体的呈现方式、ClearType 等。

【参考方案4】：

如果你绝对必须在所有浏览器中都有一个像素完美的设计（不推荐它；只为这些部分使用图像），我会尝试从 CSS 重置开始。

这是一个真的长的 CSS 行，您可以将其插入到样式表的顶部以“重置”CSS。浏览器倾向于使用它们自己的默认值，如果不考虑它们，可能看起来很古怪。

/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
*/
htmlcolor:#000;background:#FFF;body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,tdmargin:0;padding:0;tableborder-collapse:collapse;border-spacing:0;fieldset,imgborder:0;address,caption,cite,code,dfn,em,strong,th,varfont-style:normal;font-weight:normal;lilist-style:none;caption,thtext-align:left;h1,h2,h3,h4,h5,h6font-size:100%;font-weight:normal;q:before,q:aftercontent:'';abbr,acronymborder:0;font-variant:normal;supvertical-align:text-top;subvertical-align:text-bottom;input,textarea,selectfont-family:inherit;font-size:inherit;font-weight:inherit;input,textarea,select*font-size:100%;legendcolor:#000;

感谢 Yahoo!：http://developer.yahoo.com/yui/3/cs-s-reset/。

【讨论】：

还有Eric Meyers reset作为选项。

【参考方案5】：

其中一个看起来几乎是粗体。正如 Carl 所建议的那样，尝试让您的设计更能接受不同的文本大小，特别是对于那些提高文本大小以便他们可以看到的用户。至于浏览器之间的细微差别，有时使用 css 重置器会有所帮助

http://www.maxdesign.com.au/articles/css-reset/