案例：
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#one{
font-family:"微软雅黑" /*设置字体*/
}
.hui{
color: #999;
}
h2{
letter-spacing: 5px /*设置标题字间距*/
}
.red{
color: red;
}
.blue{
color:#05A9F2;
}
.center{
text-align: center;/*标题居中*/
}
img{
margin:0px 30px; /*给图片上下外边距设置为0左右外边距设置为30*/
}
p{
white-space: nowrap;/*设置空格空行无效，强制文本不能换行*/
}
em{
white-space: nowrap;/*设置空格空行无效，强制文本不能换行*/
}
</style>
</head>
<body>
<spen class="center">
<h2 class="hui">把握<font class="blue">移动端字体设计</font>的七大准则</h2>
</spen>
<spen class="center" id="one">
<p class="hui">更新时间:
<font class="blue">2020年06月06日17时26分</font>
 来源:
<font class="blue">问答精灵</font>
</p>
</spen>
<span>
<img src="2.jpg" align="left">
<p>♠ <font class="red">留足空间,字体并非穹曲曲的线条排列</font>，它主要在于周围和相互间的空间。</p>
<p>♠ 行宽是行文字的长度,<font class="red">是一行文字的理想长度</font>，因为很难让每行都精确吻合，</p>
<p>♠ 行距是行之间的空间,行距太紧凑,<font class="red">会让视线难以从行尾扫视到下一行首。</font></p>
<p>♠ 所有字体至少都有一种最佳状态, <font class="red">使字体在浏览器中最能保持字形的抗据齿选项。</font></p>
<p>♠ 你读的多数内容是<font class="red">居左对齐,右边沿参差不齐的</font>，这样看起来<font class="red">更有节奏。</font></p>
<p>♠ 增强文字与背景对比的同时,我们也要<font class="red">减少不同层次文字间的反差。</font></p>
<p>♠ <font class="red">按比例调整字问距</font>,为移动端调整字号时，要意识到字间距发生了必要的变化。</p>
<hr size="2" color="#E3E3E3" >
<em class="hui">
原文链按:
<em class="blue">http://www.woshipm.compd/136680.html</em>
   文章分类:
<em class="blue">艺术设计</em>
</em>
</span>
</body>
</html>