【发布时间】：2014-12-31 18:23:50
【问题描述】：
我有一个文本阴影生成器的网页。我正在使用 Bootstrap 模板。我也在使用自定义字体。此页面不在线只是本地文件。当我使用 Chrome 时，将应用自定义字体，但在 Firefox 中，如果我将页面上传到我的网站，它不会例外。我使用 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 设置是让浏览器决定字体样式和默认值，还是设置为让每个单独的页面选择？要检查，请执行以下操作.....选项->内容->字体和颜色->高级->勾选“允许页面选择自己的字体，而不是我上面的选择”复选框......让我知道这是否有效
-
不一样！！！
-
你试过给你的字体一个绝对路径而不是相对路径吗？甚至使用 Bootstrap CDN 字体？只是一些想法
-
由于某些奇怪的原因，Bootstrap cdn 无法正常工作
-
如果您使用的是 Bootstrap CDN，只需使用 Bootstrap CDN...取出其他相对路径...这会导致问题
标签： html css firefox fonts font-face