Question

我使用字体＆＃34; HelveticaNeueLT Pro 25 UltLt＆＃34;生成此代码，对字体不太确定，但生成的文本重叠：

＆＃13;

<div style=" position:absolute; top:36pt; left:64.8pt; border:0pt solid black; width:507.8pt;height:125pt;">

<div align="left" style="line-height:0pt; ">
<span style="white-space:pre-wrap;  font:normal 34pt HelveticaNeueLT Pro 25 UltLt; color:rgb(102,102,102);">My </span>
<span style="white-space:pre-wrap;  font:normal 34pt HelveticaNeueLT Pro 25 UltLt; color:rgb(102,102,102);">Name</span>
<span style="white-space:pre-wrap;  font:normal 34pt HelveticaNeueLT Pro 25 UltLt; color:rgb(102,102,102);"> Is</span>
</div> 

<div align="left" style="line-height:0pt; ">
<span style="white-space:pre-wrap;  font:normal 30pt HelveticaNeueLT Pro 25 UltLt; color:rgb(77,217,255);">David </span>
<span style="white-space:pre-wrap;  font:normal 30pt HelveticaNeueLT Pro 25 UltLt; color:rgb(77,217,255);">Soban</span>
</div> 

</div>

＆＃13;

然而，当我将字体更改为Arial时，Everything就会出现在它的位置。

＆＃13;

<div style=" position:absolute; top:36pt; left:64.8pt; border:0pt solid black; width:507.8pt;height:125pt;">

<div align="left" style="line-height:0pt; ">
<span style="white-space:pre-wrap;  font:normal 34pt Arial; color:rgb(102,102,102);">My </span>
<span style="white-space:pre-wrap;  font:normal 34pt Arial; color:rgb(102,102,102);">Name</span>
<span style="white-space:pre-wrap;  font:normal 34pt Arial; color:rgb(102,102,102);"> Is</span>
</div> 

<div align="left" style="line-height:0pt; ">
<span style="white-space:pre-wrap;  font:normal 30pt Arial; color:rgb(77,217,255);">David </span>
<span style="white-space:pre-wrap;  font:normal 30pt Arial; color:rgb(77,217,255);">Soban</span>
</div> 

</div>

＆＃13;

如果给定的字体不可用或不正确，有没有办法设置默认字体？如何使这个字体工作，因为它是一个有效的字体..我有我的系统字体但仍然无法正常工作。它是否与浏览器理解有关，或者一般HTML不支持它。

Answer 1

将Arial（或任何其他默认）字体设置为父容器，并以子样式重新定义它。如果重新定义的字体可用，它将被显示，如果没有，它将保留父母的字体。

＆＃13;

<div style=" position:absolute; top:36pt; left:64.8pt; border:0pt solid black; width:507.8pt;height:125pt;">

<div align="left" style="line-height:0pt; font:normal 34pt Arial;">
<span style="white-space:pre-wrap;  font:normal 34pt HelveticaNeueLT Pro 25 UltLt; color:rgb(102,102,102);">My </span>
<span style="white-space:pre-wrap;  font:normal 34pt HelveticaNeueLT Pro 25 UltLt; color:rgb(102,102,102);">Name</span>
<span style="white-space:pre-wrap;  font:normal 34pt HelveticaNeueLT Pro 25 UltLt; color:rgb(102,102,102);"> Is</span>
</div> 

<div align="left" style="line-height:0pt; font:normal 34pt Arial;">
<span style="white-space:pre-wrap;  font:normal 30pt HelveticaNeueLT Pro 25 UltLt; color:rgb(77,217,255);">David </span>
<span style="white-space:pre-wrap;  font:normal 30pt HelveticaNeueLT Pro 25 UltLt; color:rgb(77,217,255);">Soban</span>
</div> 

</div>

＆＃13;

Answer 2

你完全不应该使用font属性！这完全是过时的，你应该使用css类或（不是非常推荐但仍然比font属性更好）写一个样式属性：

<style>
.title{
  font-family: HelveticaNeue, Arial, sans-serif;
  font-size: 24px;
}
</style>
<div class="title">Your title here</div>

另外，作为设计师，我必须告诉你，你应该使用px或em单位而不是pt单位，你应该避免使用Helvetica，因为它不能很好地渲染，如果字体大小是小它甚至看起来不像helvetica。一个很好的选择是Lucida Sans，Verdana，Tahoma，Lato，Open sans ......

Answer 3

添加line-height

<div style=" position:absolute; top:36pt; left:64.8pt; border:0pt solid black; width:507.8pt;height:125pt;">

<div align="left" style="line-height:20pt; ">
<span style="white-space:pre-wrap;  font:normal 34pt HelveticaNeueLT Pro 25 UltLt; color:rgb(102,102,102);">My </span>
<span style="white-space:pre-wrap;  font:normal 34pt HelveticaNeueLT Pro 25 UltLt; color:rgb(102,102,102);">Name</span>
<span style="white-space:pre-wrap;  font:normal 34pt HelveticaNeueLT Pro 25 UltLt; color:rgb(102,102,102);"> Is</span>
</div> 

<div align="left" style="line-height:20pt; ">
<span style="white-space:pre-wrap;  font:normal 30pt HelveticaNeueLT Pro 25 UltLt; color:rgb(77,217,255);">David </span>
<span style="white-space:pre-wrap;  font:normal 30pt HelveticaNeueLT Pro 25 UltLt; color:rgb(77,217,255);">Soban</span>
</div> 

</div>

缺少/不寻常的字体使文本重叠

3 个答案: