Question

我无法使用postcss加载字体。

我的src目录中有字体文件，如下所示： https://i.stack.imgur.com/KYCym.png

我的css文件如下所示：

@font-face{
    font-family: Boxley ;
    src: url(./fonts/Boxley.ttf), format('ttf');
}
@font-face{
    font-family: Boxley-Bold;
    src: url(./fonts/Boxley-Bold.ttf), format('ttf');
}

等。我的Postcss.config.js看起来像这样：

module.exports = {
    plugins: [
        require('precss'),
        require("css-mqpacker"),
        require("postcss-cssnext"),
        require("cssnano"),
        require("rucksack-css"),
        require("postcss-font-magician")({
        hosted: ['./src/css/fonts']
    })]
}

我的webpack文件如下所示：

module: {
    rules: [{   
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader"
            }
        },
        { 
            test: /\.(png|woff|woff2|eot|ttf|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
            loader: 'url-loader?limit=100000' 
        },
        {
            test: /\.css$/,
            loaders:ExtractTextPlugin.extract(['css-loader', 'postcss-loader']),
        },
        {
            test: /\.scss$/,
            loaders: ExtractTextPlugin.extract(['css-loader', 'postcss-loader']),               
        },
    ]
},

编译时没有任何问题

Answer 1

@font-face{
    font-family: Boxley;
    src: url(fonts/Boxley.ttf), format('ttf');
}

@font-face{
    font-family: Boxley-Bold;
    src: url(fonts/Boxley-Bold.ttf), format('ttf');
}

您的CSS文件与fonts子文件夹位于同一目录中，并且您正在使用src属性...请检查here。

字体加载器postcss

1 个答案: