CSS自定义字体不起作用

Question

我下载了一种字体，我想在 css 中创建一个横幅，我需要这种字体，但它没有显示。

@font-face {
    font-family: Minecrafter;
    src: url("../fonts/Minecrafter_3.ttf") format('truetype');
}

#logo{
    width:100%;
    height:100px;
    background-color: red;
    text-align:center;
    font-family:Minecrafter;
    font-size:40px;
}

我能以某种方式检查错误吗？我正在开发一个 win8 应用程序。

Answer 1

不同的浏览器支持不同的字体格式，所以你需要为每个浏览器提供一组备选方案(某些浏览器支持.eot.woff *ttf)所以你必须提供备选方案src 为你的字体:

@font-face {
    font-family: Minecrafter;
    src: url("font.ttf") format('truetype');
         url("font.woff") format('woff');
}

将字体转换为所需格式的好网站: https://onlinefontconverter.com