Question

这可能是一个菜鸟问题，但我不能让它在每个浏览器中看起来都一样。我在这做错了什么？我希望在所有浏览器中显示类似于Firefox的文本。

请参阅：Firefox：

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

铬：

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

Safari：

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>

Answer 1

您使用固定宽度定义了父容器#myslogan。

如果你有足够大的字体和足够长的非破坏文本，内容可能会溢出。

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

另外，不同的浏览器会以不同的方式创建粗体字样，因此请关闭粗体以查看内容发生的情况。

Answer 2

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

因此，尝试找到一个符合您需要的字体，由印刷师设计。它也应该有合适的间距，这样你就不需要letter-spacing，这也可能导致浏览器之间的差异。

Answer 3

不同的浏览器以不同的方式处理字体。这question可能是你的帮助。

Answer 4

我会放弃

字体重量
字母间距

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

为什么这段在不同的浏览器中看起来有所不同

4 个答案: