H5（nuxt）项目引入字体

最新推荐文章于 2024-07-12 12:07:21 发布

蓝衫黑裤白鞋

最新推荐文章于 2024-07-12 12:07:21 发布

阅读量3.7k

点赞数

分类专栏： Vue2 文章标签： nuxtjs vue字体 vue引入ttf 前端使用ttf

本文链接：https://blog.csdn.net/u013368397/article/details/100546980

版权

本文介绍了在H5项目（基于Nuxt.js）中如何引入字体文件，包括直接引入ttf文件、使用font-spider压缩以及通过有字库在线服务的方式，并分析了各种方法的优缺点。在考虑用户体验和简洁性后，给出了针对不同场景的推荐方案。

摘要由CSDN通过智能技术生成

H5（nuxt）项目引入字体

闲话少说
方法1：
1.下载所需要的字体，.ttf格式本文以（FZCYJ.ttf 为例）
2.先自己定义一个font.css文件，字体文件的路径引入


@font-face {
  font-family: "华文行楷";
  src: url('stxingka.ttf');
  font-weight: normal;
  font-style: normal;
}

3.App.vue中的style里引入

<style lang="less" rel="stylesheet/less">
  @import "./common/font/font.css";
</style>

4、添加loader

module: {
    rules: [
        {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
            }
        }
    ]
}

5.使用