外部CSS和@ font-face
[英]external css and @font-face
問題描述
所有。 我經常引用SO，感謝社區和專業知識。 很棒的網站！ 我是菜鳥會員，請多多包涵。
問題：未加載/顯示嵌入式文件
ROOT DIR有兩個目錄：插件和項目
插件包含mycss.css文件和4個字體文件（2個woff，2個ttf）
mycss.css
@font-face {
font-family: 'ALG';
src: url('ALGbvs.woff') format('woff'),
url('ALGbvs.ttf') format('truetype');
}
@font-face {
font-family: 'BVS';
src: url('BitstreamVeraSans.woff') format('woff'),
url('BitstreamVeraSans.ttf') format('truetype');
}
index.html包含（摘錄）
<head>
...
<!-- font-family: ALG and BVS -->
<link href="../plugins/mycss.css" rel="stylesheet" type="text/css" />
...
<style>
body {
font-family: ALG;
background-color: #F9EFE2;
margin: 0;
}
</style>
</head>
我以為我正確地引用了css文件和字體，但是它們沒有被加載/顯示在正文中。 我想念什么？ 感謝您的閱讀和回復。
2 個解決方案
解決方案1
0 已采納 2016-06-29 18:06:08
首先使用@ font-face更通用的方式，
使用這種字體面生成工具來生成字體面對面文件所有主流瀏覽器字體面發生器
@font-face {
font-family: "ALG";
src: url("myfont/ALGbvs.eot");
src: url("myfont/ALGbvs.eot?#iefix") format("embedded-opentype"),
url("myfont/ALGbvs.woff") format("woff"),
url("myfont/ALGbvs.ttf") format("truetype"),
url("myfont/ALGbvs.svg#ALG") format("svg");
font-weight: normal;
font-style: normal;
}
然后檢查您是否正確提到了字體文件路徑，讓我們假設所有字體的文件夾都說“ myfont ”位於您保存css文件的文件夾中。
然后你的身體標簽會像
body {
font-family: "ALG";
}
解決方案2
-2 2016-06-29 17:59:35
您沒有在CSS中定義源。 添加完整的字體網址位置，如下所示：
@ font-face {src：url（“ ../ plugins / ALGbvs.ttf”）;}
外部CSS中的多種字體
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.