Кернинг на шрифте между Chrome и Firefox

Я работаю над меню с пользовательским шрифтом, а в Chrome (и Safari) оно расположено именно так, как я хочу.

http://american-motorsports.net/2012/

Когда я смотрю в Firefox, кернинг шрифта немного отличается, вызывая небольшой черный разрыв в крайнем правом пункте меню. Я вижу разницу между F и A в FABRICATION

HTML-код очень прост прямо сейчас:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="resources/css/reset.css" />
<link rel="stylesheet" href="resources/css/main.css" />
<title><?php echo date('M d, Y') . ' | '; ?>American Motorsports - Off-Road Fabrication</title>
</head>
<body>
<div id="wrap">
    <div id="header">
        <div id="logo">
            <img src="resources/images/logo.png" width="291" height="150" alt="American Motorsports - Off-Road Fabrication" />
        </div>
        <div id="menu">
            <a href="#"><span class="item">HOME</span></a><a href="#"><span class="item">SUSPENSION</span></a><a href="#"><span class="item">FABRICATION</span></a><a href="#"><span class="item">PROJECTS</span></a><a href="#"><span class="item">MEDIA</span></a><a href="#"><span class="item">CONTACT</span></a>
        </div>
    </div>
    <div id="main"></div>
</div>
</body>
</html>

и CSS состоит из этого до сих пор

@font-face {  
    font-family: bebas;  
    src: url("../fonts/bebas.ttf") format("truetype");  
    font-weight: normal;
    font-style: normal;
}

body {
    font-size: 14px;
    color: #ccc;
    line-height: 20px;
    margin: 0;
    padding: 0;
    background: url("../images/bg.png") #202020;
}

#wrap {
    background: url("../images/bg_main.jpg") no-repeat center top;
    min-height:800px;
}

#header {
    border-top: 5px solid #3a3a3a;
    height:150px;
    width:970px;
    background-color:#000000;
    margin: 50px auto;
}

#logo {
    width:324px;
    height:179px;
    background-color:#121212;
    border-top: 5px solid #3a3a3a;
    border-bottom: 5px solid #ffffff;
    margin-top:-22px;
    float:left;
}

#logo img {
    margin-left:13px;
    margin-top:17px;
}

#menu {
    width:646px;
    height:150px;
    float:right;
    margin:0;
    padding:0;  
}

#menu a {
    margin:0;
    padding:0;
}

.item {
    font-family:bebas;
    font-size:18px;
    height:150px;
    display:inline-block;
    text-align:center;
    line-height:8em;
    color:#fff;
    cursor:pointer;
    padding-left:20px;
    padding-right:20px;
    margin:0;
    text-shadow: 0 3px 3px #111;
}

.item:hover {
    background: -moz-linear-gradient(top,  #3a3a3a 0%, #101010 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#101010));
    background: -webkit-linear-gradient(top,  #3a3a3a 0%,#101010 100%);
    background: -o-linear-gradient(top,  #3a3a3a 0%,#101010 100%);
    background: -ms-linear-gradient(top,  #3a3a3a 0%,#101010 100%);
    background: linear-gradient(to bottom,  #3a3a3a 0%,#101010 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a3a3a', endColorstr='#101010',GradientType=0 );
}

#main {
    width:970px;
    /*background-color:#ffffff;*/
    margin: 0 auto;
}

Так что вопрос в том, как убрать пробел, чтобы он выглядел как Chrome и Safari, или исправить проблему кернинга. Я просто не хочу, чтобы этот пробел в Firefox

Источник

3 ответа

Решение

Быстрое грязное решение

#menu{
  white-space: nowrap;
  overflow: hidden; /* means you don't get a dirty edge, but the last link may be smaller on the right */
}

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

Например, если вы добавите:

.item{
  padding: 0;
  width: 16.66%; /* assuming you always have 6 links */
}

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

Источник

Вы должны обернуть span вокруг оскорбительных букв и настроить CSS letter-spacing: недвижимость, пока не получишь то, что хочешь.

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

План Б: использовать изображение.

Источник

Я не вижу, какой пробел вы пытаетесь устранить, но то, что вы описываете, это проблема, что Firefox (современные версии) применяет кернинг по умолчанию, если он определен шрифтом. Другие браузеры этого не делают. Так что это вопрос кернинга, а не кернинга, а не разницы в кернинге. Кернинг обычно считается типографски желательным. Но если вы действительно хотите предотвратить кернинг Firefox, это возможно с помощью настроек шрифтов, например, в этом случае с

#menu  { -moz-font-feature-settings: "kern" 0; }
Источник
Другие вопросы по тегам