我的网站的每个其他页面都包含一个“ 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验证器验证我的整个网站。
它显示的唯一错误是以下内容:
目前,我发现网络上没有任何帮助。
没有标签,如何做同样的事情(@ 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>
");