我有一个网站，但遇到文本无法正确显示的问题。它会有所不同，我认为根据屏幕分辨率，但我不知道为什么。
知道为什么会这样吗？
http://jsfiddle.net/948DD/这是源代码
<body>
<div id="navwrap">
<div id="nav" align="center">
<ul>
<img src="img/notify_icon.png"/>
<li><a href="#top">HOME</a></li>
<li><a href="#p04">FEATURE SET</a></li>
<li><a href="#whoareweclick">WHO ARE WE</a></li>
<li><a href="#divider5">INDIEGOGO</a></li>
<li><a href="#href">CONTACT US</a></li>
</ul>
</div>
</div>
<div id="contentwrap">
<div id="welcome" align="center">
<table>
<tr id="tr01">
<td id="td01">
<p id="p01">Hi.</p>
<p id="p02">welcome to the webpage of</p>
<p id="p03">NOT!fy</p>
<p id="p04">the best solution against annoying notifications</p>
</td>
<td id="td02"><img src="img/notify_big_icon.png"/></td>
</tr>
</table>
</div>
<div id="divider" align="center">
<img src="img/divider_with_arrow.png"alt="divider" id="dividerpng"/>
</div>
<div id="featureset_chrome" align="center">
<table>
<tr id="chrometr">
<td id="chrometd01"><img src="img/featureset_chrome.png"/>
</td>
<td id="chrometd02">
<p id="chromep01">feature set</p>
<p id="chromep02">- a world first solution to get rid of annoying notifications</p>
<p id="chromep03">- you just need a Google Chrome extension and our app installed on your mobile device and you are good to go</p>
<p id="chromep04">behind the scenes</p>
<p id="chromep05">the Chrome extension watches which sites you are currently viewing and mutes the matching applications on your phone</p>
</td>
</tr>
</table>
</div>
<div id="divider2" align="center">
<img src="img/divider_points.png"alt="divider" id="dividerpointspng"/>
</div>
<div id="per_app_muting" align="center">
<table>
<tr id="perapptr">
<td id="perapptd01">
<p id="perapp_p01">per app muting</p>
<p id="perapp_p02">- forget the annoying notifications (e.g.: game notifications) </p>
<p id="perapp_p03">- with our sleek UI you can easily pick the applications which you rather want to be muted</p>
</td>
<td id="perapptd02"><img src="img/per_app_muting.png"/>
</td>
</tr>
</table>
</div>
<div id="divider3" align="center">
<img src="img/divider_points.png"alt="divider" id="dividerpointspng"/>
</div>
<div id="quiet_hours" align="center">
<table>
<tr id="qhtr">
<td id="qhtd01"><img src="img/quiet_hours.png"/>
</td>
<td id="qhtd02">
<p id="qhp01">quiet hours</p>
<p id="qhp02">- set your cycle to turn on silent mode for your smartphone in specific time intervallum </p>
<p id="qhp03">- no more awkward moments because of your ringing phone</p>
<div id="whoareweclick"></div>
</td>
</tr>
</table>
</div>
<div id="divider4" align="center">
<img src="img/divider.png"alt="divider" id="dividerpng"/>
</div>
<div id="whoarewe" align="center">
<p id="whop1">Who are we? </p>
<p id="whop2">Two passionate and determined boy who believe that they can change the way how the Android notification system works.</p>
<p id="whop3">We live in Hungary and attend university in Budapest.</p>
</div>
<div id="whopics" align="center">
<table>
<tr id="whotr">
<td id="whotd01"><img src="img/kerdojel.png"/>
<p id="name"> bendegúz </p>
<p id="descr"> 18 yrs <br />
our spokesman <br />
also good at: <br />
html, css <br />
</p>
</td>
<td id="whotd02"><img src="img/kristof.png"/>
<p id="name"> kristóf </p>
<p id="descr"> 19 yrs <br />
owner of the idea <br />
responsible for: <br />
design <br />
</p>
</td>
</tr>
</table>
</div>
<div id="whopics2" align="center">
<table>
<tr id="whotr">
<td id="whotd01"><img src="img/kerdojel.png"/>
<p id="name"> X Y </p>
<p id="descr"> we are looking for an android developer, if you are brave enough to join our startup, then head over to "Contact us" section
</p>
</td>
</tr>
</table>
</div>
<div id="divider5" align="center">
<img src="img/divider.png"alt="divider" id="dividerpng"/>
</div>
<div id="indiegogo" align="center">
<p id="indiep1">Indiegogo </p>
<p id="indiep2">As we are students, we don't own a big amout of equity.</p>
<p id="indiep3">That is why we decided to crowdfund our idea at Indiegogo.</p>
<p id="indiep4">We find it the best way to get noticed and be able to get funded.</p>
<p id="indiep5">Soon a pitch video will be released.</p>
<p id="indiep6">our state at the moment:</p>
<p id="ourstate"><img src="img/ourstate.png"/></p>
</div>
</div>
<footer id="footer">
<p>Copyright: NOT!fy 2014, development and design by: Kristóf Dombi, Máté Bendegúz Kovács</p>
</footer>
@charset "utf-8";
/* CSS Document */
#navwrap {
z-index:10;
}
#contentwrap {
padding-top:92px;
z-index:5;
}
#nav {
font-family: Century Gothic;
font-size: 16px;
color: #fff;
background-color: #353539;
height: 100px;
width: auto;
font-weight: bold;
border-width:0px;
opacity:0.95;
padding:0px;
width:100%;
position:fixed;
top:0;
left:0;
}
#nav ul {
margin:0 auto;
width:auto;
height:100px;
margin-bottom:
}
#nav ul li {
list-style-type: none;
text-align: center;
display:inline-block;
margin: 0px;
padding:0px 10px 0px 10px;
border-right:1px solid #DDD;
height: 10px;
vertical-align: middle;
}
#nav ul li {
text-decoration: none;
color: #d2d2d2;
text-align: center;
display: inline-block;
padding: 30px;
margin-bottom: 90px;
vertical-align: middle;
}
#nav a {
text-decoration: none;
color: #d2d2d2;
text-align: center;
margin-top: 10px;
margin-bottom: 30px;
padding: 0px;
}
#nav ul li a:hover {
color: #ffd200;
}
#nav img{
width:100px;
}
body
{
background-color:#c5c5c5;
}
#welcome {
width:850px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
}
#tr01 {
height:300px;
}
#td01 {
text-align:left;
vertical-align: top;
}
#td02 {
text-align:right;
}
#td02 img {
width:200px;
margin-left: 110px;
margin-top: 10px;
}
#p01 {
text-decoration:none;
color:#3c3c40;
font-family: Roboto, thin;
font-size:60px;
font-weight:300;
margin-top: 30px;
}
#p02 {
text-decoration:none;
color:#3c3c40;
font-family: Roboto;
font-size:30px;
font-weight:300;
}
#p03 {
text-decoration:none;
color:#3c3c40;
font-family: Roboto condensed;
font-weight:400;
font-size:35px;
margin-top:7px;
margin-bottom:7px;
}
#p04 {
text-decoration:none;
color:#3c3c40;
font-family: Roboto;
font-weight:300;
font-size:15px;
}
#featureset_chrome {
width:850px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
}
#chrometr {
height:450px;
}
#chrometd01 {
text-align:left;
vertical-align: top;
width:450px;
}
#chrometd02 {
text-align:right;
margin-left:0px;
width:400px;
}
#chrometd01 img {
width:300px;
margin-left: 50px;
margin-top: 0px;
}
#chromep01 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:50px;
margin-bottom:20px;
}
#chromep02 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#chromep03 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#chromep04 {
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:35px;
margin-top:10px;
margin-bottom:20px;
text-decoration:underline;
}
#chromep05 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#per_app_muting {
width:850px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
}
#perapptr {
height:450px;
}
#perapptd01 {
text-align:left;
vertical-align: top;
width:450px;
}
#perapptd02 {
text-align:right;
margin-left:0px;
width:400px;
}
#perapptd02 img {
width:300px;
margin-left: 50px;
margin-top: 0px;
}
#perapp_p01 {
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:35px;
margin-top:10px;
margin-bottom:20px;
text-decoration:underline;
}
#perapp_p02 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#perapp_p03 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#quiet_hours {
width:850px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
}
#qhtr {
height:500px;
}
#qhtd01 {
text-align:left;
vertical-align: top;
width:450px;
}
#qhtd02 {
text-align:right;
margin-left:0px;
width:400px;
}
#qhtd01 img {
width:300px;
margin-left: 50px;
margin-top: 0px;
}
#qhp01 {
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:35px;
margin-top:10px;
margin-bottom:20px;
text-decoration:underline;
}
#qhp02 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#qhp03 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#whoareweclick {
padding-top:200px;
}
#whoarewe{
width:850px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
text-align:left;
}
#whop1 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:50px;
margin-bottom:20px;
}
#whop2 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#whop3 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#whopics {
width:600px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
text-align:center;
}
#whotr {
height:250px;
}
#whotd01 {
text-align:center;
vertical-align: top;
width:300px;
}
#whotd02 {
text-align:center;
margin-left:0px;
width:300px;
}
#whotd01 img {
width:200px;
margin-top: 30px;
margin-left:auto;
margin-right:auto;
}
#whotd02 img {
width:200px;
margin-top: 30px;
margin-left:auto;
margin-right:auto;
}
#name {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:40px;
margin-bottom:5px;
margin-left:auto;
margin-right:auto;
}
#descr {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:25px;
margin-bottom:20px;
margin-left:auto;
margin-right:auto;
}
#desctd01 {
text-align:center;
vertical-align: top;
width:320px;
}
#desctd02 {
text-align:center;
margin-left:0px;
width:320px;
}
#divider5 {
margin-top:50px;
}
#indiegogo{
width:850px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
text-align:right;
}
#indiep1 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:50px;
margin-bottom:20px;
}
#indiep2 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#indiep3 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#indiep4 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#indiep5 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#indiep6 {
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:30px;
margin-top:30px;
margin-bottom:30px;
text-decoration:underline;
}
#ourstate {
margin-left:auto;
margin-right:auto;
text-align:center;
}
#ourstate img {
width:600px;
margin-left:auto;
margin-right:auto;
}
#footer {
background-color: #353539;
height:50px;
margin-top:100px;
margin-bottom:0px;
opacity:0.95;
}
#footer p {
color:#d2d2d2;
font-family: Roboto;
font-weight:300;
font-size:17px;
text-align:center;
padding-top:17px;
}
最佳答案
对您的问题的广泛回答:
这是 type hinting 的结果, anti-aliasing以及基于显示的渲染质量。一般来说，Windows 不会像 Mac OS X 那样对文本进行抗锯齿处理。这意味着字体不会使用子像素或周围像素“平滑”，导致字体看起来参差不齐。
当没有提示字体时，情况会更加复杂，这是一项繁琐的任务，需要手动挑选将在每个单独尺寸的字体渲染中使用的像素。如果再加上缺乏抗锯齿功能，您可能会错过信件表格的实际部分!
如果您正在查看像素数较少的显示器，情况会更加复杂。
尝试找到字体的暗示版本，尝试使用更大的字体，或者一起使用不同的字体。
关于html - html显示文本的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23763548/