Question

我有一个网站，我遇到的问题是文字没有正确显示。它根据屏幕分辨率而有所不同，但我不知道为什么。

知道为什么会这样吗？

<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;
}

Answer 1

对您的问题的广泛回答：

这是type hinting，anti-aliasing的结果，以及基于显示的渲染质量。一般来说，Windows不会像Mac OS X那样反对别名文本。这意味着该类型不会被平滑＆＃34;使用子像素或周围像素导致类型看起来锯齿状。

当没有提示字体时，这是复杂的，这是手工挑选像素的繁琐任务，将在每个单独尺寸的字体渲染中使用。当这与缺乏抗锯齿相结合时，你可能会错过你的信件形式的实际部分！

如果您正在查看像素数较少的显示器，则会进一步复杂化。

尝试找到字体的暗示版本，尝试使用更大的尺寸，或者使用不同的字体。

html显示文本的问题

1 个答案: