确定chrome和firefox之间的字体 [英] Kerning on font between chrome and firefox
问题描述
我正在使用自定义字体和Chrome浏览器（和safari）的菜单进行操作，它的间距完全是我想要的。
http://american-motorsports.net/2012/
当我在firefox中查看它，字体的字距有点不同，导致最右边的菜单项有一点黑色的空隙。我可以看到 F 中 F 和 A 的区别现在非常简单：
<！DOCTYPE html>
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta charset =utf-8/>
< link rel =stylesheethref =resources / css / reset.css/>
< link rel =stylesheethref =resources / css / main.css/>
< title><？php回声日期（'M d，Y'）。 '| ; ？> American Motorsports - 越野制造< / title>
< / head>
< body>
< div id =wrap>
< div id =header>
< div id =logo>
< img src =resources / images / logo.pngwidth =291height =150alt =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）格式（truetype）;
font-weight：normal;
font-style：normal;
}
body {
font-size：14px;
颜色：#ccc;
line-height：20px;
保证金：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;
背景颜色：＃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;
保证金：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;
颜色：#fff;
光标：指针;
padding-left：20px;
padding-right：20px;
保证金：0;
text-shadow：0 3px 3px＃111;
}
.item：hover {
background：-moz-linear-gradient（top，＃3a3a3a 0％，＃101010 100％）;
背景：-webkit渐变（线性，左上方，左下方，颜色停止（0％，＃3a3a3a），颜色停止（100％，＃101010））;
background：-webkit-linear-gradient（top，＃3a3a3a 0％，＃101010 100％）;
背景：-o-linear-gradient（顶部，＃3a3a3a 0％，＃101010 100％）;
background：-ms-linear-gradient（top，＃3a3a3a 0％，＃101010 100％）;
背景：线性渐变（至底部，＃3a3a3a 0％，＃101010 100％）;
filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃3a3a3a'，endColorstr ='＃101010'，GradientType = 0）;
}
#main {
width：970px;
/ * background-color：#ffffff; * /
margin：0 auto;
$ b 所以问题是如何去除间隙，使它看起来像铬和Safari或修复kerning问题..我只是不希望在firefox的差距
解决方案
一个快速肮脏的解决方案是 #menu {
white-space：nowrap;
overflow：hidden; / *表示你没有肮脏的边缘，但最后一个链接可能在右边较小* /
}
理想情况下，您不应该依赖字体的宽度来使菜单看起来正确。
如果您有时间，请为每个链接指定一个班级和一个自定义宽度。
甚至更好，使用每个项目中的链接列表来获得更大的控制权。
例如，如果您添加：
.item {
padding：0;
width：16.66％; / *假设你总是有6个链接* /
}
...他们会一直适合，但有些看起来很垃圾。
对于最专业的妆容，您需要给每个类别和自定义宽度。
I am working on a menu with a custom font and in chrome (and safari) it is spaced exactly how I want it.
http://american-motorsports.net/2012/
When I view it in firefox, the kerning of the font is a little different causing a little black gap on the far right menu item. I can see the difference between the F and A in FABRICATION
The HTML is very simple right now:
<!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>
and the CSS consists of this so far
@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;
}
So the question is how to remove the gap so it looks like chrome and safari or fix the kerning issue..I just dont want that gap in firefox
解决方案 A quick dirty solution is
#menu{
white-space: nowrap;
overflow: hidden; /* means you don't get a dirty edge, but the last link may be smaller on the right */
}
Ideally though, you shouldn't be relying on the width of the font to make your menu look right.
If you have the time, give each of these links a class, and a custom width.
Or even better, use a list with links in each item, to get greater control.
For example, if you add:
.item{
padding: 0;
width: 16.66%; /* assuming you always have 6 links */
}
...they will always fit, but some will look rubbish.
For the most professional-looking finish, you'll want to give each a class and custom width.
这篇关于确定chrome和firefox之间的字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
