以下代码适用于Google Chrome测试版以及IE 7.但是,Firefox似乎存在此问题.我怀疑它是如何包含我的CSS文件的问题,因为我知道Firefox对跨域导入不太友好.
但这只是静态HTML而且不存在跨域问题.
在我的landing-page.html上,我像这样进行CSS导入:
<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />
在main.css中我有另外一个这样的导入:
@import url("reset.css");
@import url("style.css");
@import url("type.css");
在type.css中我有以下声明:
@font-face {
font-family: "DroidSerif Regular";
src: url("font/droidserif-regular-webfont.eot");
src: local("DroidSerif Regular"),
url("font/droidserif-regular-webfont.woff") format("woff"),
url("font/droidserif-regular-webfont.ttf") format("truetype"),
url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
font-weight: normal; font-style: normal; }
@font-face {
font-family: "DroidSerif Bold";
src: url("font/droidserif-bold-webfont.eot");
src: local("DroidSerif Bold"),
url("font/droidserif-bold-webfont.woff") format("woff"),
url("font/droidserif-bold-webfont.ttf") format("truetype"),
url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
font-weight: normal; font-style: normal; }
body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }
我在type.css的相同位置有一个名为"font"的目录.这个字体目录包含所有woff/ttf/svg文件等.
我很难过这个. …
我试图使用本地字体在html中应用样式，下面是代码。字体未应用于harlow类的使用元素
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src:local("C:\Users\Website\fonts\Harlow_Solid_Italic.ttf");
}
.harlow{
font-family: myFirstFont;
}
</style>
</head>
<body>
<div>With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>
<p><b class="harlow">Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule with the WOFF format (only support for EOT format).</p>
</body>
</html>
我在计算机上安装了想要应用于HTML5 / CSS3的字体时遇到问题。
我的问题与可能重复的问题有何不同：它明确询问要在.html文件中放入什么，重复问题中未解决的问题。
解决问题后更新：
1）该<link href=....>行不得包含在.html文件中
2）.woff字体文件必须与.css文件位于同一目录中。
这是我最小的工作CSS：
@font-face{
font-family: Reef;
src: local('../Fonts/Reef/reef-webfont.woff'), url('../Fonts/Reef/reef-webfont.woff') format('woff');
}
body, h1, h2{
text-align:center;
font-family: 'Reef', monospace;
}
这是我最小的工作HTML文件：
<html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/
libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript"></script>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" href="stylesGrilcheeserie.css" type="text/css"/>
<link href='../Fonts/Reef/reef-webfont.woff' rel='stylesheet' type='text/css'>
<title> Grilcheeserie </title>
</head>
<body>
<h1>La Grilcheeserie</h1>
</body>
</html>
无论我做什么，页面都会显示其备用字体，等宽字体而不是Reef。
我的问题是：如何正确引用html中的字体来源？据我从搜索答案中得知，我的CSS应该是正确的。
我在Windows 10上使用Firefox。
我希望我的用户能够从他们的计算机中选择一种字体并更新网页以使用该字体。
<style>
html * { font-family: Arial !important; }
</style>
我使用html *并且css我想将字体系列更改为用户的文件。
<script>
function change_css() {
// ???
}
</script>
<div>
<div</div>
<input type="file" name="upload" id="upload"/>
<input type="submit" value="submit" onclick="change_css();">
</div>
如何实施？
css ×3
font-face ×3
html ×2
css3 ×1
file-uri ×1
firefox ×1
font-family ×1
html5 ×1
javascript ×1