请教老师项目中如何添加新字体

来源：1-1 课前必读（不看会错过一个亿）

长沙易蓬

2020-01-03

设计稿里用了系统以外的字体, 放在了 src/fonts 文件夹里
图片描述
webpack.config.js里配置的是这样的:

module: {
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader") },
            { test: /\.(gif|png|jpg|gif)\??.*$/, loader: 'url-loader?limit=200&name=images/[name].[ext]' },
            { test: /\.(woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=5&name=fonts/[name].[ext]' },
            {
                test: /\.string$/, 
                loader: 'html-loader',
                query : {
                    minimize : true,
                    removeAttributeQuotes : false
                }
            }
        ]
    },

模仿webpack网站(https://webpack.js.org/guides/asset-management/#loading-fonts)写的css

@font-face {
  font-family: 'SCFZXFXS';
  src: url('../../fonts/SCFZXFXS.ttf') format('ttf');
  font-weight: 400;
  font-style: normal;
}
.test{
  font-family: 'SCFZXFXS';
  font-size: 30px;
}

打包、运行后没有报错, 但是字体也没有效果,
请问老师这种情况有哪些解决方法么,
拜谢先?

写回答

2回答

Rosen

2020-01-04

已采纳

用法没什么错，先看下浏览器里生效了么，再就是你的系统是不是支持ttf格式的字体

长沙易蓬

非常感谢！

2020-01-05

共2条回复

长沙易蓬

提问者

2020-01-05

参考dist里打包出来的css代码

@font-face {
font-family: 'FontAwesome';
src: url(/dist/fonts/fontawesome-webfont.eot);
src: url(/dist/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0) format('embedded-opentype'), url(/dist/fonts/fontawesome-webfont.woff2) format('woff2'), url(/dist/fonts/fontawesome-webfont.woff) format('woff'), url(/dist/fonts/fontawesome-webfont.ttf) format('truetype'), url(data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJmb250cy9mb250YXdlc29tZS13ZWJmb250LnN2ZyI7#fontawesomeregular) format('svg');
font-weight: normal;
font-style: normal;
}

把

src: url('../../fonts/SCFZXFXS.ttf') format('ttf');

改成

src: url('../../fonts/SCFZXFXS.ttf') format('truetype');

使用

真实数据对接从0开发前后端分离的企业级上线项目

【毕设项目精品】前端实战，对接真实服务端数据，开发完整项目

4281 学习 · 4121 问题

查看课程

相似问题

重新生成了公钥，也在码云上添加了。但还是会有这个问题

回答 1

将dist文件删除之后，再执行webpack命令，无法生成dist文件夹

回答 1

老师您好，添加SSH KEY之后

回答 1

mac chrome下的css字体调试

回答 1

老师，二期课程什么时间出哩？

回答 1

打开慕课网App查看更多内容