Question

我试图整理一个非常简单的静态页面，该页面使用存储在Amazon S3中的漂亮的无衬线字体字体：

    <!DOCTYPE html>
    <html>
        <head>
            <style type="text/css">
                .block {
                    width: 800;
                    display: table;
                }
                .break {
                    height: 20px;
                }
                .top {
                    width:800px;
                    margin-top: 50px;
                    text-align: center;
                }
                .centralized {
                    width:800px;
                    text-align: center;
                }
                .unified {
                    width:800px;
                    text-align: left;
                }           
                .contact {
                    width: 800px;
                    text-align: center;
                }
            </style>
            <style type="text/css">
                @font-face {
                    font-family: "Neutral";
                    src: url(https://s3.amazonaws.com/daniel.emmettschmidt.com/neutral.otf) format("opentype");
                }
                p.a { 
                    font-family: "Neutral", Arial, Helvetica, sans-serif;
                    display: inline;
                    font-size:10px;
                }
                p.b { 
                    font-family: "Neutral", Arial, Helvetica, sans-serif;
                    display: inline;
                    font-size:20px;
                }
                p.d { 
                    font-family: "Neutral", Arial, Helvetica, sans-serif;
                    display: inline;
                    font-size:40px;
                }
            </style>
        </head>
        <body>
            <div class ="main_section">
                <div class ="block">
                    <div class="top">
                        <p class="d"><font color = "#305497"><b>TITLE</b></p></font>
                    </div>
                    <div class="contact">
                        <p class="a">
                        CONTACT INFORMATION</p>
                    </div>
                </div>
                <div class = "block">
                    <div class="break"></div>
                    <div class = "unified">
                        <p class="b">
                            <b>
                                SUBHEADER:
                            </b>
                        </p>
                    </div>
                    <div class="break"></div>
                    <div class ="centralized">
                        <p class = "a"><i>
                            EXTRA DETAILS
                        </i></p>
                    </div>
                    <div class="break"></div>
                    <div class = "unified">
                        <p class ="a">
                            DESCRIPTION
                        </p>
                    </div>
                    <div class ="break"></div>
                    <div class ="unified">
                        <p class = "a">
                            <ul>
                                <li>
                                    LIST IS NOT SANS SERIFF
                                </li>
                                <li>
                                    LIST IS NOT SANS SERIFF
                                </li>
                                <li>
                                    LIST IS NOT SANS SERIFF
                                </li>
                            </ul>
                        </p>
                    </div>
                </div>
            </div>
    </body>

如果你在浏览器中打开它，你会看到标题中建立的字体没有为列表实现，任何人都可以帮忙吗？

Answer 1

最好将paragraph <p>放入列表中以使其正常工作。

尝试此结构，您的问题已解决

<ul>
  <li>
     <p class = "a">
      LIST IS NOT SANS SERIFF
     </p>
  </li>
  <li>
     <p class = "a">
      LIST IS NOT SANS SERIFF
     </p>
  </li>
</ul>

Answer 2

将该字体赋予＆lt; li>标签（在css中）并删除那些段落

Answer 3

@import从Google字体加载Open Sans字体： CSS第一行是导入字体的URL。

@import url(//fonts.googleapis.com/css?family=Open+Sans);
body {
font-family: 'Open Sans', sans-serif;
}

同样，您可以链接到与HTML文档中的任何其他CSS过滤器相同的资源，而不是CSS。使用Google字体中的相同示例，我们将使用此功能：

<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

试过上面的代码

HTML / CSS自定义字体未实现

3 个答案: