Question

我可以很好地更改标题的颜色，但很难更改字体的外观，因此它可以使用所有不同类型的字体（即.eot，.svg，.tff，.woff和.woff2）。

我所有的字体文件都保存在Web服务器上：/ httpdocs / wp-content / themes / leeway / css / fofbb

，因此我将以下内容放在style.css中的文件中：（\ httpdocs \ wp-content \ themes \ leeway \ style.css）

#logo .site-title {
    font-family: 'fofbb', Tahoma, Verdana, Arial;
       src: url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.eot') format("embedded-opentype"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.woff') format("woff"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.ttf') format("truetype"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.svg') format("svg");
    display: inline-block;
    padding: 0.15em 0;
    font-size: 2.7em;
    color: #92f442; }
#logo .site-title a:link,
#logo .site-title a:visited {
    font-family: 'fofbb', Tahoma, Verdana, Arial;
       src: url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.eot') format("embedded-opentype"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.woff') format("woff"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.ttf') format("truetype"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.svg') format("svg");
    display: inline-block;
    padding: 0.15em 0;
    color: #92f442;}
#logo .site-title a:hover,
#logo .site-title a:active {
    font-family: 'fofbb', Tahoma, Verdana, Arial;
       src: url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.eot') format("embedded-opentype"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.woff') format("woff"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.ttf') format("truetype"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.svg') format("svg");
    display: inline-block;
    padding: 0.15em 0;
    color: #92f442;
    text-decoration: none;}

我知道我肯定会更改正确的元素，因为当我更改颜色时，它会更改确定。

有人可以让我知道我的代码出了什么问题以及为什么我的新字体不显示吗？

干杯

保罗

Answer 1

尝试仅将字体重命名为 fofbb 。即 fofbb.woff ， fofbb.tff 等

对我有用。

Answer 2

使用@font-face添加字体，如下所示：

@font-face {
  font-family: "fofbb";
          src: url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.eot') format("embedded-opentype"), 
               url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.woff') format("woff"), 
               url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.ttf') format("truetype"), 
               url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.svg') format("svg");
}

#logo .site-title {
  font-family: "fofbb"
}

<div id="logo">
  <div class="site-title">site title</div>
</div>

点击here，以获取有关@font-face规则的更多信息。

我无法将上传的字体用于我的网站标题

2 个答案: