IE 和 Firefox 中的文本大小不同

发布于 2024-10-26 19:19:56 字数 256 浏览 7 评论 0原文

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

Image

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

谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

北斗星光 2024-11-02 19:19:57

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

Using different types of font files (eot, woff2, woff, ttf, otf) works for me. I use https://onlinefontconverter.com/ to convert font files into types I need, also it reduces them sizes.
Here's my SCSS mixin I use to switch all files into css:

@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');

回复收藏 0 原文

貪欢 2024-11-02 19:19:57

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

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

回复收藏 0 原文

予囚 2024-11-02 19:19:57

还可以尝试显式设置 sans-serif 等的 font-family 属性的“第二部分”：

字体系列：Arial、无衬线字体；

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

回复收藏 0 原文

赠意 2024-11-02 19:19:57

您是否尝试过字体大小调整

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

回复收藏 0 原文

迷爱 2024-11-02 19:19:56

如果您绝对必须在所有浏览器中拥有像素完美的设计（不推荐；只需在这些部分使用图像），我会尝试从 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/ 。

If you absolutely must have a pixel-perfect design in all browsers (not recommending it; just use images for those parts), I'd try starting with a CSS reset.

Here's a really long line of CSS that you can insert into the top of your stylesheet to "reset" the CSS. Browsers tend to use their own defaults, and if you don't account for them, things might look wacky.

/*
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;}

Credit goes to Yahoo!: http://developer.yahoo.com/yui/3/cssreset/.

回复收藏 0 原文

~没有更多了~