代码之家  ›  专栏  ›  技术社区  ›  Rackover

字体贴面的正文中

  •  0
  • Rackover  · 技术社区  · 7 年前

    我有一个“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>
    

    enter image description here 目前,我在网上没有发现任何有用的东西。 没有标签,我怎么做同样的事情(@font-face)?

    注意,我不能将这些声明放入样式中。css文件,因为这个页脚是用在多个不同的子网站里面的网站风格。css文件不同。

    3 回复  |  直到 7 年前
        1
  •  3
  •   Priyanjit    7 年前

    <style> 在…内 <div> .不要这样做。最好将代码移到内部或单独的外部CSS。
    首选外部CSS,因为它提高了可重用性。

        2
  •  1
  •   unor Daniel Garijo    7 年前

    script 在里面 body 在HTML 5.2(W3Cs下一个HTML建议)中(可能)允许。

    这个 current HTML 5.2 Working Draft for the style element

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

    • 其中需要元数据内容。
    • 在一个 noscript head 要素
    • 身体

    (最后一行是 not included in HTML 5.1 ,这是当前的HTML建议。)


    style element conforming in body in w3c HTML

        3
  •  -1
  •   sTx    7 年前

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