Question

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

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

  div id =“scoped-content”＆gt;＆＃xA;＆lt; style type =“text / css”scoped＆gt;＆＃xA; @ font-face {＆＃xA; font-family：'LilyUPC'; ＆＃XA; src：url（'/ common / upcll.ttf'）; ＆＃XA; }＆＃XA;＆＃XA; div.footer {＆＃xA;位置：固定; ＆＃XA;底部：0; ＆＃XA;左：0; ＆＃XA;右：0;＆＃XA; background-color：black;＆＃xA;浮：向下;＆＃XA;文本对齐：中心;＆＃XA; z-index：20;＆＃xA; font-family：“LilyUPC”;＆＃xA;颜色：红色;＆＃XA;字体大小：12磅;＆＃XA;文字装饰：下划线;＆＃XA; }＆＃xA;＆lt; / style＆gt;＆＃xA;＆lt; / div＆gt;＆＃xA;＆lt; a href =“/ index.php”＆gt;＆＃xA; ＆lt; div class =“footer”＆gt;＆＃xA; SITENAME＆＃XA; ＆lt; / div＆gt;＆＃xA;＆lt; / a＆gt;＆＃xA;

＆＃xA;＆＃xA;

但是最近我一直感到担心写出正确的HTML / CSS，并开始使用w3c验证器验证我的整个网站。＆＃xA;它显示的唯一错误如下：

＆＃xA;＆＃xA;

＆＃xA;目前，我发现网上没有任何帮助。＆＃xA;如果没有标签我怎么能做同样的事情（@ font-faceing）？

＆＃xA;＆＃xA;

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

＆＃XA;

Answer 1

错误即将发生，因为您将<style>置于<div>内。不要那样做。最好将该代码移动到内部或单独的外部CSS 外部CSS是首选，因为它提高了可重用性。

Answer 2

（{1}}中的{p> script（可能）将被允许进入HTML 5.2（W3C的下一个HTML推荐标准）。

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

可以使用此元素的上下文：


预期元数据内容的位置。

在body元素中，该元素是noscript元素的子元素。

在head中，预计会有流量内容。

（最后一行是not included in HTML 5.1，这是当前的HTML推荐标准。）

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

Answer 3

检查检查元素中的样式

＆＃13;

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

＆＃13;

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

＆＃13;

然后在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>
   ");

正文中的<style>面向字体

3 个答案: