Node.jsでfontを読み込みたい
私は現在、大学で「Node.js」の「Socket.io」を使ってリアルタイムアプリを開発しています。
先ほど、HTML内で読み込んでいるCSSファイルが反映されていませんでした。
自分で調べていると、MIMEタイプを拡張子毎に変える必要がると判明し、CSSファイルは反映させることができました。
しかし、「bootstrap」のフォントだけはMIMEタイプを変更してもWEBページに反映されませんでした。
発生している問題・エラーメッセージ
Failed to decode downloaded font: <URL>
http://localhost:3000/CoolAdmin/vendor/mdi-font/fonts/Material-Design-Iconic-Font.woff2?v=2.2.0
http://localhost:3000/CoolAdmin/fonts/poppins/poppins-v5-latin-500.woff2
http://localhost:3000/CoolAdmin/vendor/font-awesome-5/webfonts/fa-solid-900.woff2
http://localhost:3000/CoolAdmin/fonts/poppins/poppins-v5-latin-700.woff2
http://localhost:3000/CoolAdmin/fonts/poppins/poppins-v5-latin-regular.woff
http://localhost:3000/CoolAdmin/vendor/mdi-font/fonts/Material-Design-Iconic-Font.woff?v=2.2.0
http://localhost:3000/CoolAdmin/fonts/poppins/poppins-v5-latin-500.woff
http://localhost:3000/CoolAdmin/fonts/poppins/poppins-v5-latin-700.woff
http://localhost:3000/CoolAdmin/vendor/font-awesome-5/webfonts/fa-solid-900.woff
http://localhost:3000/CoolAdmin/fonts/poppins/poppins-v5-latin-regular.ttf
http://localhost:3000/CoolAdmin/vendor/mdi-font/fonts/Material-Design-Iconic-Font.ttf?v=2.2.0
http://localhost:3000/CoolAdmin/fonts/poppins/poppins-v5-latin-500.ttf
http://localhost:3000/CoolAdmin/fonts/poppins/poppins-v5-latin-700.ttf
http://localhost:3000/CoolAdmin/vendor/font-awesome-5/webfonts/fa-solid-900.ttf
app.js
JavaScript
1 2//モジュールの読み込み 3var http = require('http'); 4var socketio = require('socket.io'); 5var fs = require('fs'); 6 7//HTTPサーバを生成 8var server = http.createServer(function(req,res){ 9 var path = ''; 10 11 //拡張子を取得 12 var fileName = req.url; 13 var type = fileName.split('.'); 14 15 //MIMEタイプ 16 var mime = { 17 'html':'text/html', 18 'css' :'text/css', 19 'js' :'text/javascript', 20 'woff':'application/font-woff', 21 'ttf' :'application/x-font-ttf', 22 'otf' :'application/x-font-otf', 23 'svgf':'image/svg+xml', 24 'eot' :'application/vnd.ms-fontobject' 25 }; 26 27 switch(key = type[type.length - 1]){ 28 case 'js' : 29 case 'css' : 30 case 'woff': 31 case 'ttf' : 32 case 'otf' : 33 case 'svgf': 34 case 'eot' : 35 case 'html': 36 res.writeHead(200,{'Content-Type' : mime[key]}); 37 path += fileName; 38 break; 39 40 default: 41 path += '/index.html'; 42 }; 43 44 //console.log(__dirname + path); 45 res.end(fs.readFileSync(__dirname + path,'utf-8')); 46}).listen(3000);
index.html
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <!-- Required meta tags--> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 8 <meta name="description" content="au theme template"> 9 <meta name="author" content="Hau Nguyen"> 10 <meta name="keywords" content="au theme template"> 11 12 <!-- Title Page--> 13 <title>BootStrap</title> 14 15 <!-- Fontfaces CSS--> 16 <link href="CoolAdmin/css/font-face.css" rel="stylesheet" media="all"> 17 <link href="CoolAdmin/vendor/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all"> 18 <link href="CoolAdmin/vendor/font-awesome-5/css/fontawesome-all.min.css" rel="stylesheet" media="all"> 19 <link href="CoolAdmin/vendor/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all"> 20 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" /> 21 <!-- Bootstrap CSS--> 22 <link href="CoolAdmin/vendor/bootstrap-4.1/bootstrap.min.css" rel="stylesheet" media="all"> 23 24 <!-- Vendor CSS--> 25 <link href="CoolAdmin/vendor/animsition/animsition.min.css" rel="stylesheet" media="all"> 26 <link href="CoolAdmin/vendor/bootstrap-progressbar/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" media="all"> 27 <link href="CoolAdmin/vendor/wow/animate.css" rel="stylesheet" media="all"> 28 <link href="CoolAdmin/vendor/css-hamburgers/hamburgers.min.css" rel="stylesheet" media="all"> 29 <link href="CoolAdmin/vendor/slick/slick.css" rel="stylesheet" media="all"> 30 <link href="CoolAdmin/vendor/select2/select2.min.css" rel="stylesheet" media="all"> 31 <link href="CoolAdmin/vendor/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" media="all"> 32 33 <!-- Main CSS--> 34 <link href="CoolAdmin/css/theme.css" rel="stylesheet" media="all"> 35 36 <!-- Socket.IO --> 37 <script type="text/javascript" src="/socket.io/socket.io.js"></script> 38 39</head> 40 41~(略)~ 42 43 <!-- Jquery JS--> 44 <script src="CoolAdmin/vendor/jquery-3.2.1.min.js"></script> 45 <!-- Bootstrap JS--> 46 <script src="CoolAdmin/vendor/bootstrap-4.1/popper.min.js"></script> 47 <script src="CoolAdmin/vendor/bootstrap-4.1/bootstrap.min.js"></script> 48 <!-- Vendor JS --> 49 <script src="CoolAdmin/vendor/slick/slick.min.js"> 50 </script> 51 <script src="CoolAdmin/vendor/wow/wow.min.js"></script> 52 <script src="CoolAdmin/vendor/animsition/animsition.min.js"></script> 53 <script src="CoolAdmin/vendor/bootstrap-progressbar/bootstrap-progressbar.min.js"> 54 </script> 55 <script src="CoolAdmin/vendor/counter-up/jquery.waypoints.min.js"></script> 56 <script src="CoolAdmin/vendor/counter-up/jquery.counterup.min.js"> 57 </script> 58 <script src="CoolAdmin/vendor/circle-progress/circle-progress.min.js"></script> 59 <script src="CoolAdmin/vendor/perfect-scrollbar/perfect-scrollbar.js"></script> 60 <script src="CoolAdmin/vendor/chartjs/Chart.bundle.min.js"></script> 61 <script src="CoolAdmin/vendor/select2/select2.min.js"> 62 </script>
試したこと
フォントファイルのMIMEタイプの定義が出来ていなくてフォントがダウンロードできていないと思い、自分なりに半日掛けて試行錯誤しましたがエラーは直りませんでした
何卒よろしくお願いいたします
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/25 11:44