我的网站的每个其他页面都包含一个“ footer.php”页面。此页脚在屏幕底部显示站点的名称。但是此页脚也使用自定义字体,该字体使用@ font-face加载。

所以直到现在,我在主体的末端(内部)都放置了这样的东西:

div id="scoped-content">
<style type="text/css" scoped>
    @font-face {
      font-family: 'LilyUPC';
      src: url('/common/upcll.ttf');
    }

    div.footer {
        position: fixed;
        bottom: 0;
        left:0;
        right:0;
        background-color: black;
        float:down;
        text-align:center;
        z-index: 20;
        font-family: "LilyUPC";
        color:red;
        font-size:12pt;
        text-decoration:underline;
    }
</style>
</div>
<a href="/index.php">
    <div class="footer">
        SiteName
    </div>
</a>


但是最近我一直在担心编写正确的html / CSS,并开始使用w3c验证器验证我的整个网站。
它显示的唯一错误是以下内容:

html - 主体中的&lt;Style&gt;用于字体显示-LMLPHP
目前,我发现网络上没有任何帮助。
没有标签,如何做同样的事情(@ font-faceing)?

请注意,我不能将这些声明放在style.css文件中,因为此页脚用于style.css文件不同的网站内的多个不同子站点中。

最佳答案

签入检查元素中头部的样式



var styles = "<style>"+
    "@font-face { "+
      "font-family: 'LilyUPC'; "+
      "src: url('/common/upcll.ttf');}"+

   "div.footer {"+
        "position: fixed;" +
        "bottom: 0;" +
       "left:0;" +
        "right:0;" +
       "background-color: black;" +
        "float:down;" +
        "text-align:center;" +
        "z-index: 20;"+
        "font-family: 'LilyUPC';" +
        "color:red;" +
        "font-size:12pt;" +
        "text-decoration:underline;}" +
"</style>";

$("head").append(styles);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="other">Unstyled content here</div>
<div class="footer">Styled content here</div>





然后在php中,将此js放在<script </script>内,并回显整个脚本

像这样:

echo("
     <script>
        var styles = \"<style>\"+
        \"@font-face { \"+
              \"font-family: 'LilyUPC'; \"+
              \"src: url('/common/upcll.ttf');}\"+

         \"div.footer {\"+
               \"position: fixed;\" +
               \"bottom: 0;\" +
               \"left:0;\" +
                \"right:0;\" +
               \"background-color: black;\" +
               \"float:down;\" +
               \"text-align:center;\" +
                \"z-index: 20;\"+
                \"font-family: 'LilyUPC';\" +
                \"color:red;\" +
                \"font-size:12pt;\" +
                \"text-decoration:underline;}\" +
        \"</style>\";

        $(\"head\").append(styles);

     </script>
   ");

10-05 20:43
查看更多