<Style> 在 body 中 font-facing

Question

我有一个 "footer.php" 页面，我将其包含在我网站的所有其他页面中。此页脚在屏幕底部显示站点名称。但是这个页脚也使用自定义字体，使用@font-face.

加载

所以直到现在我有这样的东西，放在 body 的末尾（内部）：

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 验证程序验证我的整个站点。它显示的唯一错误如下：

目前，我在网上找不到任何有用的东西。没有标签我怎么能做同样的事情（@font-faceing）？

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

Answer 1

出现错误是因为您将 <style> 放在了 <div> 中。不要那样做。最好将该代码移动到内部或单独的外部 CSS.
外部 CSS 是首选，因为它增加了可重用性。

Answer 2

检查头部样式的检查元素

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>
   ");

Answer 3

script in body 将（可能）在 HTML 5.2（W3C 的下一个 HTML 建议）中被允许。

current HTML 5.2 Working Draft for the style element 指定：

Contexts in which this element can be used:

Where metadata content is expected.

In a noscript element that is a child of a head element.

In the body, where flow content is expected.

（最后一行是 not included in HTML 5.1，这是当前的 HTML 建议。）

这是要求更新 W3C 使用的验证器的问题：
style element conforming in body in w3c HTML

<Style> 在 body 中 font-facing

<Style> in body for font-facing

html

css

w3c-validation