Question

我有一个文本阴影生成器的网页。我正在使用Bootstrap模板。我也在使用自定义字体。此页面不在线只是本地文件。当我使用Chrome时，将会应用自定义字体，但在Firefox中，除非我将页面上传到我的网站，否则它将不会被应用。我使用linux进行开发，但是当我尝试使用Firefox for Android Beta时也发生了同样的事情。为什么会这样？

这是来自Firefox的图片： enter image description here

以下是Chrome上传或上传时的效果： enter image description here

这是我的代码： 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;
        }

Answer 1

默认情况下，Firefox附带了一个非常严格的“文件uri origin”（file：///）策略：要让它像其他浏览器一样运行，请转到about：config，按fileuri过滤并切换以下首选项：

security.fileuri.strict_origin_policy

将其设置为false，您应该能够跨不同的路径级别加载本地字体资源。

Firefox不会加载/呈现自定义字体

1 个答案: