Размер текста отличается в IE и Firefox - PullRequest
Новая
       17

Размер текста отличается в IE и Firefox

2 голосов
/ 28 марта 2011

Почему текст в IE немного больше (шире), чем в Firefox? Пример (вверху показано, как IE отображает текст, снизу - FF):

Изображение

Текст, объявленный в CSS как Arial 16px. Я знаю, что в IE есть сглаживание, но оно не должно увеличивать размер шрифта IMO. Это тот случай, здесь? Это нарушает мой дизайн. Могу ли я с этим что-нибудь сделать, кроме уменьшения размера шрифта?

Спасибо!

Ответы [ 5 ]

1 голос
/ 15 февраля 2019

Использование различных типов файлов шрифтов (eot, woff2, woff, ttf, otf) работает для меня.Я использую https://onlinefontconverter.com/ для преобразования файлов шрифтов в нужные мне типы, а также уменьшает их размеры.Вот мой SCSS-миксин, который я использую для переключения всех файлов в 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');
1 голос
/ 28 марта 2011

Если вы абсолютно должны иметь идеальный по пикселям дизайн во всех браузерах (не рекомендую его; просто используйте изображения для этих частей), я бы попробовал начать с сброса 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;}

Кредит идет в Yahoo !: http://developer.yahoo.com/yui/3/cssreset/.

0 голосов
/ 22 ноября 2013

Вы пробовали настроить размер шрифта

Пример: font-size-Adjust: 0,47;

0 голосов
/ 28 марта 2011

Также попробуйте явно установить «вторую часть» атрибута font-family для sans-serif и т. Д .:

семейство шрифтов: Arial, без засечек;

Если это сглаживание, нет настройки CSS, чтобы изменить это в IE. Также операционная система может влиять на то, как отображается шрифт, ClearType и т. Д.

0 голосов
/ 28 марта 2011

Один из них выглядит почти смелым.По предложению Карла постарайтесь сделать свой дизайн более восприимчивым к разным размерам текста, особенно для пользователей, которые проверяют размер текста, чтобы они могли видеть.Что касается незначительных различий между браузерами, иногда использование css resetter может помочь

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

...