HTML和CSS自定義字體沒有出現在我的頁面上

Question

這是我的html代碼->

        <div data-role="page" id="page1" >

            <div data-role="header"  data-theme="b">
                 <h1>header</h1>        
            </div>

            <div data-role="content">
                 <p id="myfont">content</p>
            </div>

             <div data-role="footer" >
                 <h1>footer</h1>
              </div>
      </div>
 </body>

這是我的CSS代碼----->

   @font-face{
    font-family:'Byron Medium';
    src:url('byronmedium.ttf');
       // font-size:'60px';
    }
  div #myfont{
    font-family:'Byron Medium';
    font-size:'60px';   
     }

我的自定義字體系列和字體大小即將出現在頁面上，請幫助我

Answer 1

如果我不得不猜測，我會說您的字體名稱錯誤。

嘗試

@font-face{
    font-family:'Byron Medium';
    src:url('byronmedium.ttf');
    // font-size:'60px';
}

true字體通常是.ttf，否？

Answer 2

請嘗試此操作，我可以確定您的解決方案已完成。

請添加eot, woff, svg, formate並在您的CSS樣式上添加@font-face套件。

    @font-face{
        font-family:'Byron Medium';
        src:url('byronmedium.tff');
           // font-size:'60px';
        src: url('byronmedium-webfont.eot');
         src: url('byronmedium-webfont.eot?#iefix') format('embedded-opentype'),
                         url('byronmedium-webfont.woff') format('woff'),
                         url('byronmedium-webfont.ttf') format('truetype'),
                         url('byronmedium-webfont.svg#byronmedium') format('svg');
                    font-weight: normal;
                    font-style: normal;
    }

      .myfont{
        font-family:'Byron Medium';
        font-size:'60px';   

     }

HTML

    <div data-role="page" id="page1" >

        <div data-role="header"  data-theme="b">
             <h1>header</h1>        
        </div>

        <div data-role="content">
             <p class="myfont">content</p>
        </div>

         <div data-role="footer" >
             <h1>footer</h1>
          </div>
  </div>

Answer 3

您要應用字體的選擇器是div #myfont ，但是您正在選擇一個ID，因此div是多余的。

嘗試更改此：

div #myfont{
 font-family:'Byron Medium';
 font-size:'60px';   
}

對此：

#myfont{
 font-family:'Byron Medium';
 font-size:'60px';   
}

或.myFont是，使用一個類（ .myFont ），並將其應用於要使用該字體的任何元素。

Answer 4

從CSS定義中刪除div元素，

@font-face{
font-family:'Byron Medium';
src:url('byronmedium.tff');
   // font-size:'60px';
}

#myfont
{
font-family:'Byron Medium';
font-size:'60px';   
}

Answer 5

由於具有myfont id的元素是不是除myfont的子段，因此當前選擇器不匹配示例標記中的任何內容。 更改為

#myfont { /*...*/ }

另外，為了獲得更好的瀏覽器支持，除非您知道您只在處理可以處理TrueType字體的瀏覽器，否則您將希望添加比.ttf更多的文件格式。

Answer 6

使用可以將@font應用於div內的<p>標記，您可以使用div p{font-family:myFirstFont;}或將類應用於<p class="yourclassname">或從您的CSS中刪除div