font-face无法在任何浏览器中使用

Question

我在为我的反应应用程序渲染字体时遇到了麻烦。我不确定我做错了什么。我在我的项目中使用font-face。这是我的font.styl文件

所有字体都在公共目录中。

font.styl

@font-face
    font-family 'museo_sans700'
    src url('/public/fonts/museosans_0-webfont.woff2') format('woff2')
        url('/public/fonts/museosans_0-webfont.woff') format('woff')
    font-weight normal
    font-style normal

@font-face
    font-family 'museo_sans300'
    src url('/public/fonts/museosans-300-webfont.woff2') format('woff2')
        url('/public/fonts/museosans-300-webfont.woff') format('woff')
    font-weight normal
    font-style normal

@font-face
    font-family 'museo_sans500'
    src url('/public/fonts/museosans-webfont.woff2') format('woff2')
        url('/public/fonts/museosans-webfont.woff') format('woff')
    font-weight normal
    font-style normal

@font-face
    font-family 'montserratregular'
    src url('/public/fonts/montserrat-regular-webfont.woff2') format('woff2')
        url('/public/fonts/montserrat-regular-webfont.woff') format('woff')
    font-weight normal
    font-style normal

这是我的base.styl

@import './bs-custom.styl'
@import './fonts.styl'

html
    width 100%
    height 100%

body
    width 100vw
    min-height 100vh
    transition all 0.2s ease
    background-color #F0F0F0

    color theme_text
    font-size 14px
    font-weight 400
    font-family museo500

    overflow hidden

这是我在配置文件中使用的加载器

{
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader?limit=100000&mimetype=application/font-woff'
            },

字体没有出现，但是。

Answer 1

我得到了那个错误。我在src url（...）

之后错过了一个逗号

 src url('/public/fonts/museosans_0-webfont.woff2') format('woff2'),
        url('/public/fonts/museosans_0-webfont.woff') format('woff')