我有一个文本阴影生成器的网页。我正在使用 Bootstrap 模板。我也在使用自定义字体。该页面不是在线的，只是本地文件。当我使用 Chrome 时，将应用自定义字体，但在 Firefox 中，如果我将页面上传到我的网站，则不会异常(exception)。我使用 Linux 进行开发，但当我尝试使用 Firefox for Android Beta 时，也发生了同样的事情。为什么会发生这种情况？
这是来自 Firefox 的图像:
这是上传后在 Chrome 或 Firefox 上的显示效果:
这是我的代码: HTML:
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Text Shadow Generator</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<META NAME="author" CONTENT="kounelios13">
<META NAME="subject" CONTENT="programming">
<META NAME="Description" CONTENT="Create text with drop shadows (also known as text-shadow) ">
<META NAME="Classification" CONTENT="No javascript is needed just pure CSS3">
<META NAME="Keywords" CONTENT="programming,web design,tools,generator">
<META NAME="Designer" CONTENT="kounelios13">
<META NAME="distribution" CONTENT="Global">
<META NAME="country" CONTENT="Greece">
<link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../../css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="../../css/general.css">
<link rel="stylesheet" type="text/css" href="../../css/navbar-head.css">
<link rel="stylesheet" type="text/css" href="../../css/apps/textshadow.css">
<link rel="stylesheet" type="text/css" href="../../css/apps/sliders.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="../../js/bootstrap.js" type="text/javascript"></script>
<script src="../../js/prefixfree.js" type="text/javascript"></script>
<script src="../../js/apps/textshadow.js" type="text/javascript"></script>
</head>
<body class="bg-danger">
<?php include '../menu.php'; ?>
<div class="container">
<div class="jumbotron landing">
<h1>Text Shadow Generator v1.0 BETA </h1>
</div>
<h1 class="btn btn-info center-block text-center " id="generators">An easy to use text shadow generator</h1>
You can try your own values in the following form:
<div class="container">
<input type="text" id="boxShadowf"><div class="btn btn-success" id="boxSub">Get val</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="h3">X-axis</span>
<input type="range" class="slider form-control" id="x" step="0.1" min="-10" max="10" value="0">
</div>
<div class="col-md-4">
<span class="h3">Y-axis</span>
<input type="range" class="slider form-control" id="y" step="0.1" min="-10" max="10" value="0">
</div>
<div class="col-md-4">
<span class="h3">Blur</span>
<input type="range" class="slider form-control" id="blur" step="0.1" min="0" max="10" value="0">
</div>
<span class="h2 text-info" id="text-shadow" contenteditable>All the transformations will be applied here</span>
</div>
<div class="row text-center h3">
<div class="col-md-4 text-danger">
Red
<input type="range" class="slider rgb" id="red" step="1" min="0" max="255" value="0" style="background:red;">
</div>
<div class="col-md-4 text-success">
Green
<input type="range" class="slider rgb" id="green" step="1" min="0" max="255" value="0" style="background:green;">
</div>
<div class="col-md-4 text-primary">
Blue
<input type="range" class="slider rgb" id="blue" step="1" min="0" max="255" value="0" style="background:blue;">
</div>
</div>
<div class="btn btn-warning" id="toggleCode">
Toggle code
</div>
<div class="btn btn-danger" id="resetCode">Reset code</div>
<h1>Code</h1>
<div class="code bg-primary text-info " id="code">
div{
<p class="text-success bg-info"><span class="standard coded">
text-shadow:<span class="h-shadow Code">0px</span> <span class="v-shadow Code">0px</span> <span class="blur Code">0px</span> <span class="color"> black</span></span>
;</p>
}
</div>
<div class="btn btn-danger btn-block" id="optimize" >Optimize code</div>
</div>
</div>
</body>
</html>
还有我的 CSS:
@font-face {
font-family: '3dumbregular';
src: url('../../fonts/3dumb/3dumb-webfont.eot');
src: url('../../fonts/3dumb/3dumb-webfont.eot?#iefix') format('embedded-opentype'),
url('../../fonts/3dumb/3dumb-webfont.woff') format('woff'),
url('../../fonts/3dumb/3dumb-webfont.ttf') format('truetype'),
url('../../fonts/3dumb/3dumb-webfont.svg#3dumbregular') format('svg');
font-weight: normal;
font-style: normal;
}
/*body{background:#99afaa;}
*/
div.landing{
font-family: '3dumbregular';
text-align: center;
background: dodgerblue;
}
.landing h1{
font-style: italic;
color: red;
}
.generator{
margin: auto;
margin-top: 5em;
height: 15em;
width: 15em;
background: orange;
border:4px dashed gold;
border-radius: 8px;
}
.slider{
background: #aa9df9;
}
.slider:nth-child(1){
padding-left: 0px;
}
.inset{
display: none;
}
/* Bρες το .row που ειναι κατευθειαν μετα απο μια ετικετα h1 */
h1 ~.row{
margin-top: 0.4em;
}
#boxShadowf,#boxSub{
height: 30px;
}
#boxSub{
padding: 3px;
margin-left: 3px;
margin-bottom: 1px;
}
#inset{
margin-top: 0.2em;
margin-bottom: 0.2em;
width: 10%;
}
#code{
padding: 4px;
}
最佳答案
默认情况下，Firefox 具有非常严格的“文件 uri 来源”(file:///) 策略:要使其像其他浏览器一样运行，请转到 about:config，按 fileuri 过滤并切换以下首选项:
security.fileuri.strict_origin_policy
将其设置为 false，您应该能够跨不同路径级别加载本地字体资源。
关于html - Firefox 不会加载/渲染自定义字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26742318/