当前位置：网站首页>OTS parsing error: invalid version tag solution

OTS parsing error: invalid version tag solution

2022-04-22 01:02:00 【The nib is crooked】

Use webpack pack css/less/scss/ttf And other font files , There are always many problems , Program phonetic grammar changes every month , For example, last year's grammatical structure may have various problems when it is used today , After all, grammar is constantly improving , When you encounter entanglement . Too much entanglement is really unnecessary , Until one day I did more , Then change the front one a little , To achieve the desired results . See more and practice more , Think more , It's good to take more notes . What you get is naturally not someone else's .

The goal is ： Package font file png|woff|woff2|svg|ttf|eot

Tools ： Is the use of webpack Tools

Basics ： Suitable for having node Basic developers apply

The plug-in package that needs to be downloaded

css-loader analysis css Of documents loader
file-loader Handling documents loader
html-webpack-plugin Create a... In virtual memory html Page plugin "

style-loader Will parse the resulting css Style file insert style Juxtaposition head Labeled loader
url-loader analysis url The path of loader
webpack Code compilation tools
webpack-cli Provides developers with a flexible set of commands , To customize the settings webpack Speed up the project
webpack-dev-server dev fictitious server The server

Static compilation : webpack

Dynamic compilation [ Turn on dev adopt http Agreement to access ] : npm run dev

1. Web site to download iconfont Font package

2. Build... According to the prompts in the font package css file

3. introduce html File test

【 This step is omitted , There are cases in the font package 】

To configure man.js

// Import resources 
import './css/index.css';

index.htm

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<!-- <link rel="stylesheet" href="./css/index.css" /> -->
</head>
<body>
	<span class="iconfont afont">&#xe60d;</span>
	<span class="iconfont afont">&#xe60c;</span>
	<span class="iconfont afont">&#xe637;</span>
	<span class="iconfont afont">&#xe63b;</span>
	<span class="iconfont afont">&#xe620;</span>
</body>
</html>

index.css

@font-face {
  font-family: 'iconfont';
  src: url('./icon/iconfont.ttf?t=1650505701581') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

span{
	height: 100px;
	width: 100px;
	/* display: block; */

}
.afont{
	font-size: 150px;	
}

Project initialization

module Download here is not a burden

a key ：type: 'javascript/auto' // Type... Must be specified Although I don't know what , It seems that you must specify before which version type, It will show that the load is normal , If you know, you can tell us the specific reasons in the comment area below .

Is not specified type: 'javascript/auto'

Failed to decode downloaded font: http://localhost:3000/36bdff0eed0ef8904943.ttf?t=1650505701581
localhost/:1 OTS parsing error: invalid version tag

webpack.config.js File configuration [ Complete solution ]


const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	entry:'./src/main.js',
	output:{
		filename:'bundle.js',
		path:resolve(__dirname,'dist')
	},
	module:{
		rules:[
			{test:/\.css$/, use:['style-loader','css-loader']},//css
			// {exclude: /\.(css|js|html)$/, // Exclude packaging other resources ( except html js css Resource unexpected resource ) This statically packaged font file 
			// loader:'file-loader'
			// },
 //{test:/\.(png|woff|woff2|svg|ttf|eot)$/, use:'url-loader?esModule=false&limit=10*1024&name=[hash:8]-[name].[ext]' ,type: 'javascript/auto'},
			{test:/\.(png|woff|woff2|svg|ttf|eot)$/,
			loader:'url-loader',
			options: {
				limit: 10*1024,  // It should be large enough so that all font icons will be packaged in css in 
				esModule:false,
				name:"[hash:8]-[name].[ext]"
				},
			// type: 'javascript/auto' // Type... Must be specified 
			}
			]
			},
	plugins:[
		new HtmlWebpackPlugin({
			template:'./src/index.html',
			filename:'index.html'
		})
	],
	mode:'development'
}

Use npm run dev Turn on the virtual server

Type in the browser address bar http://localhost:3000 Page iconfont The font file display is normal

版权声明
本文为[The nib is crooked]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204211637131434.html