0

这可能是一个菜鸟问题，但我无法让它在每个浏览器中看起来都一样。我在这里做错了什么？我想在所有浏览器中像在 Firefox 中一样显示文本。

请参阅：火狐：

blabla http://piclair.com/data/ho0b9.jpg

铬合金：

铬 http://piclair.com/data/mx336.jpg

苹果浏览器：

Safari http://piclair.com/data/q5ygn.jpg

我的 CSS：

#myslogan {
float: left;
margin-top: 50px;
margin-left: 0px;
width: 290px;
height: 75px;
background: url('../images/subhlogobg.png') no-repeat;
padding: 3px 0 0 11px; 
line-height: 35px;
}

p.subs {
font-weight: bold;
display: inline;
color: #F0821F;
font-size: 23px;
}

.harabara {
list-style: none;
font-family: 'harabararegular';
letter-spacing:1px;
}

我的 HTML：

<div id="myslogan" class="harabara">
    <p class="subs">Logo en huisstijl ontwerp <br /> 
    voor een scherpe prijs!
    </p>
</div>
4

4 回答 4

2

您定义#myslogan了具有固定宽度的父容器。

如果您有足够大的字体和足够长的不间断文本行，则内容可能会溢出。

不同的浏览器有不同的默认字体（因此字母大小/间距），因此线宽会因平台而异。

此外，不同的浏览器会以不同的方式创建粗体，因此请关闭粗体以查看会发生什么。

于 2013-06-16T12:21:16.887 回答
1

从症状来看，您似乎使用的是“harabararegular”字体，大概是可下载的字体，并且您使用的是常规（非粗体）字体。要求浏览器将其加粗将导致算法加粗（笔画加粗）；结果在印刷上很差，并且因浏览器而异。（字体渲染差异还有很多其他原因，但这里这一点至关重要。）

因此，请尝试找到适合您需求的字体，如印刷师设计的那样。它还应该有合适的间距，以便您不需要letter-spacing，这也可能导致浏览器之间的差异。

于 2013-06-16T14:33:25.430 回答
0

我会放弃

  1. 字体粗细
  2. 字母间距

我会从一开始就使用粗体字体来避免这些巨大的差异。 http://www.dafont.com/harabara.font?text=Logo+en+huisstijl+ontwerp&psize=s从那里测试你的文本，看看它有什么不同，无论如何都会有不同，浏览器不要绘制和渲染警察用同样的方法。

于 2013-06-16T12:37:07.463 回答
0

不同的浏览器以不同的方式处理字体。这个问题可能对你有帮助。

于 2013-06-16T12:22:09.837 回答