IE和Firefox中的文本大小不同

Question

为什么IE中的文本比Firefox更大（更宽）？示例（顶部是IE呈现文本的方式，底部是FF）：

Image

在CSS中声明的文本为Arial 16px。我知道IE中有一个抗锯齿，但它不应该使字体更大IMO。这是这种情况吗？它打破了我的设计，除了减小字体大小外，我可以做任何事吗？

谢谢！

Answer 1

如果你绝对必须在所有浏览器中都有一个像素完美的设计（不推荐它;只是使用这些部分的图像），我会尝试从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
*/
html{color:#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,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}

归功于雅虎！：http://developer.yahoo.com/yui/3/cssreset/。

Answer 2

使用不同类型的字体文件（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');

Answer 3

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

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

Answer 4

同时尝试为sans-serif等明确设置font-family属性的“第二部分”：

font-family：Arial，sans-serif;

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

Answer 5

你尝试过font-size-adjust吗？

示例：font-size-adjust：0.47;