Question

我正在尝试在我的网站上使用非标准字体。它不起作用，但我不知道为什么。

相关CSS：

@font-face {
    font-family: 'Woodbonnet';
    src: url('/home/kco/WoodBonnet-GrotesqueNo4.eot'); /* IE9 Compat Modes */
         url('/home/kco/WoodBonnet-GrotesqueNo4.eot') format('embedded-opentype'), /* IE6-IE8 */
         url('/home/kco/WoodBonnet-GrotesqueNo4.woff2') format('woff2'), /* Super Modern Browsers */
         url('/home/kco/WoodBonnet-GrotesqueNo4.woff') format('woff'), /* Pretty Modern Browsers */
         url('/home/kco/WoodBonnet-GrotesqueNo4.otf')  format('opentype'), /* Safari, Android, iOS */
         url('/home/kco/WoodBonnet-GrotesqueNo4.ttf') format('truetype'),
         url('/home/kco/WoodBonnet-GrotesqueNo4.svg') format('svg'); /* Legacy iOS */
}

.links{
    font-family: 'Woodbonnet', Fallback, sans-serif;
    background-color: #034124;
    padding-top: 0px;
    padding-bottom: 60px;
    padding-right: 0px;
    color: #FFFFFF;
    font-size: 35px;
    /* padding-left: 20px */
    /* text-align: right; */
    margin: 0 auto;
}

字体文件与html文件都位于同一文件夹中。

Answer 1

看起来像路径问题。然后，HTML文件和字体文件必须位于同一目录中。然后先尝试使用HTML中的内联样式并添加一些小的更改。我认为src:之后必须再加上;：

<html>
  <head>
    <title>Font Test</title>
    <style>
@font-face {
    font-family: 'Woodbonnet';
    src:url('./WoodBonnet-GrotesqueNo4.eot?#iefix');
    src:url('./WoodBonnet-GrotesqueNo4.eot?#iefix') format('eot'),
        url('./WoodBonnet-GrotesqueNo4.woff2') format('woff2'),
        url('./WoodBonnet-GrotesqueNo4.woff') format('woff'),
        url('./WoodBonnet-GrotesqueNo4.otf') format('opentype'),
        url('./WoodBonnet-GrotesqueNo4.ttf') format('truetype'),
        url('./WoodBonnet-GrotesqueNo4.svg#Woodbonnet') format('svg');
}
    </style>
  </head>
  <body>
    <div class="links">This should be written in the font, but isn't.</div>
  </body>
</html>

在html

1 个答案: