html - <Style> in body for font-facing -
i've got "footer.php" page i'm including in every other page of website. footer displays name of site @ bottom of screen. footer uses custom font, loaded using @font-face.
so until had this, placed @ end (inside) of 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>
but i've been feeling concerned writing proper html/css, , began validating whole site using w3c validator. error shows following :
moment, found nothing helpful on web. how can same thing (@font-faceing) without tag ?
note cannot put theses declarations in style.css file, footer used in multiple different sub-sites inside website style.css files differs.
check in inspect element styles in head
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>
then in php put js inside <script </script>
, echo whole script
like this:
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> ");
Comments
Post a Comment