Разница шрифтов CSS в Firefox и Chrome

У меня есть проблемы с различием шрифтов в Firefox/Chrome. Все шрифты кажутся более смелыми и большими в Chrome, чем в Firefox, но я бы хотел, чтобы они были в Firefox. Я попытался добавить разные свойства, но, похоже, ничего действительно не работает. Я использую twitter bootstrap, поэтому normalize.css уже включен. Любые идеи, почему такая разница?Разница шрифтов CSS в Firefox и Chrome

Я прилагаю фото, а вот CSS используется:

body{ 
    background-color: #f9f9f9; 
    color: #555555; 
    font-family: Arial,sans-serif; 
    font-size: 14px; 
    line-height: 1.42857; 
    font-weight:400; 
    font-size-adjust: 0.5; 
    font-weight:400; 
    -webkit-text-stroke: 0.7px; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    text-rendering: optimizeLegibility; 
    -webkit-transform: translate3d(0px, 0px, 0px); 
} 

h3 { 
    font-family:"Lato",sans-serif; 
    font-weight: 300; 
    letter-spacing: normal; 
    margin-bottom: 33px; 
    word-spacing: 2px; 
    font-size: 2.5em !important; 
    line-height: 2 !important; 
}

и импортированные шрифта:

<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>

Вот ссылка, и прилагается изображение, как я вижу его на мои черенки.

JSFiddle

источник

2016-03-02 Angel M.

Можете ли вы представить пример фиктивного примера, используя что-то вроде JSFiddle? –

@NitinGarg Я создал пример jsfiddle и прикрепил изображение того, как он выглядит на моих лохмотьях –

@MrLister chrome version is 48, FF 44. Я попытался использовать font-size-adjust (и включен в css), но это работает только на FF - но мне нравится шрифт, похожий на FF, поскольку Chrome не работает (см. мои комментарии) –

браузеры не поддерживают все тот же дисплей шрифта имеется еще, к сожалению. Если вы используете только основы, шрифты будут выглядеть одинаково во всех браузерах.

div { 
 
    font: 14px/20px 'Arial', 'Liberation Sans', 'Helvetica Neue', sans-serif; 
 
}

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

Но некоторые функции, такие как font-size-adjust, будет иметь эффект только в некоторых браузерах, а не другие.

div { 
 
    font: 14px/20px 'Arial', 'Liberation Sans', 'Helvetica Neue', sans-serif; 
 
    font-size-adjust: 0.4; 
 
}

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

То же самое для таких вещей, как -webkit-text-stroke и тому подобное.

div { 
 
    font: 14px/20px 'Arial', 'Liberation Sans', 'Helvetica Neue', sans-serif; 
 
    -webkit-text-stroke: 0.7px; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    text-rendering: optimizeLegibility; 
 
}

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

Таким образом, в конце концов, это компромисс между полной кросс-браузерной совместимости или получения наилучшего результата в каждом.

источник

2016-03-02 08:13:10

еще раз спасибо :), даже в моем случае мне пришлось удалить все дополнительные настройки, чтобы они выглядели более или менее похожими –

Разница шрифтов CSS в Firefox и Chrome

ответ

Смежные вопросы