如果指定了字体格式，字体面将不起作用

Question

我正在使用node在localhost上创建一个服务器。当我通过localhost访问页面时，我无法通过css字体加载字体。在同一个文件夹上，我有一个test.html页面，当直接访问时可以很好地工作。(不是通过本地主机。(所以我想我的问题来自serve.js文件。我的字体是公共字体/font。我的index.html也在public中，我的css在public/css中。在这里：

var http = require('http');
var fs = require('fs');
var path = require('path');
var port = process.env.PORT || 1881; 
http.createServer(function (request, response) {
console.log('request starting...');
var filePath = '.' + request.url;
if (filePath == './')
filePath = './public/index.html';
var extname = path.extname(filePath);
var contentType = 'text/html';
switch (extname) {
case '.js':
contentType = 'text/javascript';
break;
case '.css':
contentType = 'text/css';
break;
case '.json':
contentType = 'application/json';
break;
case '.png':
contentType = 'image/png';
break;      
case '.jpg':
contentType = 'image/jpg';
break;
case '.wav':
contentType = 'audio/wav';
break;
case '.woff2':
contentType = 'application/font-woff2';
break;
case '.woff':
contentType = 'application/font-woff';
break;
}
fs.readFile(filePath, function(error, content) {
if (error) {
if(error.code == 'ENOENT'){
fs.readFile('./404.html', function(error, content) {
response.writeHead(200, { 'Content-Type': contentType });
response.end(content, 'utf-8');
});
}
else {
response.writeHead(500);
response.end('Sorry, check with the site admin for error: '+error.code+' ..n');
response.end(); 
}
}
else {
response.writeHead(200, { 'Content-Type': contentType });
response.end(content, 'utf-8');
}
});
}).listen(port);
console.log("Server Running on "+port+".nLaunch http://localhost:"+port);

好的，所以问题不是来自节点，而是来自手写笔？如果我这样做：

@font-face
font-family Knockout
src url(../font/Knockout-HTF28-JuniorFeatherwt.woff2),url(../font/Knockout-HTF28-JuniorFeatherwt.woff)

如果我这样做的话，它是有效的：

@font-face
font-family Knockout
src url(../font/Knockout-HTF28-JuniorFeatherwt.woff2)  format(woff2),url(../font/Knockout-HTF28-JuniorFeatherwt.woff)  format(woff)

它不起作用。。。知道吗？

Answer 1

下载网络字体并按如下方式使用：

@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

您可以将整个路径放在URL中，因为有时在localhost上它们只能这样工作。

Answer 2

首先将字体下载到本地pc 中

我将使用Open Sans font仅用于演示

注意：请检查您的字体文件是否在字体文件夹中，以及您的css文件是否在字体文件夹外？

让我知道进一步的澄清

字体应该像这个

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('../fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Open Sans Regular'), local('OpenSans-Regular'),
url('../fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

如果这个技巧不起作用，那么使用下面的技巧，B'Cz这完全取决于你的文件夹结构。

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Open Sans Regular'), local('OpenSans-Regular'),
url('fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
url('fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

Answer 3

好吧，对于任何一个在这方面犯错误的人来说，这就是答案，手写笔是罪魁祸首。

这是有效的：

src url(../font/Knockout-HTF28-JuniorFeatherwt.woff2)  format("woff2"),url(../font/Knockout-HTF28-JuniorFeatherwt.woff)  format("woff")

正因为如此：https://github.com/stylus/stylus/issues/2329