Question

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

let getR = (url) => {
    console.log('test');
    //console.log(url);
    //console.log(id);
    return fetch(url, {method: 'GET', agent: new HttpsProxyAgent('http://10.10.104.4:50683')})

    .then(resRaw =>{
        console.log(resRaw);
        return resRaw.text();
    })
    .then(resJson=>{

        console.log(resJson);
        let res=JSON.parse(resJson);
        //return res;
        console.log(res.Header.ActivityStatusEnum);
        return res;

    })
       //.then(validateResponse);

};
global.get=get;
global.getR=getR;

好吧，所以问题不是来自节点，而是来自触控笔？如果我正在这样做：

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)

它不起作用... 任何想法？

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

首先将字体下载到本地计算机中

我将仅将Open Sans font用于演示

注意：请检查字体文件是否在 fonts 文件夹中，并且css文件不在 fonts 文件夹中？

让我知道进一步的澄清

字体的脸应该是这样的

@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'coz，这完全取决于您的文件夹结构。

@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

如果指定了字体格式，则字体无法使用

3 个答案: