首頁 > web前端 > css教學 > 主體

css怎麼自訂字體

青灯夜游
發布: 2023-01-05 16:11:26
原創
15502 人瀏覽過

css自訂字體的方法:1、下載字體檔案;2、使用「@font-face」規則和font-family、src屬性來引入字體檔案即可,語法「@font-face{ font-family: '字型名稱';src:url('檔案位址');}」。

css怎麼自訂字體

本教學操作環境:windows7系統、CSS3版、Dell G3電腦。

我們在瀏覽國外的一些個人網站時,總是可以發現一些非常個性的字體,例如

#但是因為在電腦上安裝的字體有限,所以很多時候我們都找不到自己想要的字體,這時候我們就需要使用css3提供的@font-face來實現個人化字體了。

但是說@font-face是css3中的新特性是不準確的,因為在css2中就已經支援了這個特性,ie瀏覽器當時也已經支援它了,只是其他瀏覽器還不支援。而目前,各​​大瀏覽器都已經支援這個新功能了。具體這個特性怎麼用呢?看下面的程式碼:

nbsp;html>


    <meta>
    <title>Document</title>
    <style>
    @font-face{
            font-family:myFont;
            src:url(&#39;rajdhani-bold.ttf&#39;),url(&#39;rajdhani-bold.eot&#39;);
        }
        p{
            font-family: myFont;
        }
    </style>


    <div>
        <p>Ha,those words will be changed.</p>
    </div>

登入後複製

第一:我們需要在css中引入@font-face,在裡面使用font-family設定自己想要取的字體名稱,這裡我取作myFont(當然也可以是yourFont等等等等)。

第二:我們需要下載自己喜歡的字體。但應當知道:Firefox、Chrome、Safari 以及 Opera 支援 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 類型的字型。而Internet Explorer 9 支援新的 @font-face 規則,但僅支援 .eot 類型的字型 (Embedded OpenType)。

Font Squirrel(https://www.fontsquirrel.com/)這個免費的字體資源網站上有很多字體提供下載,上面多是otf和ttf格式的字體。除此之外,defont.com(http://www.dafont.com/)也是一個免費的字體資源網站,下載後的格式一般為ttf。

顯然這兩個網站下載的主要字體都沒有辦法相容於IE瀏覽器。為此,我們可以使用TTF to EOT Font Converter(https://www.kirsle.net/wizards/ttf2eot.cgi)這個字體轉換工具,將ttf格式的字體轉換為eot格式來相容於IE瀏覽器。

但最好的字型轉換工具還是Font Squirrel提供的generator(https://www.fontsquirrel.com/tools/webfont-generator), 進入之後選擇expert選項,就可以實作各種字型格式之間的轉換了。

第三:下載之後,透過解壓縮得到文件,並透過字體轉換工具,轉換為相容IE的eot格式。例如使用src:url("rajdhani-bold.ttf"),url("rajdhani-bold.eot");即可將字體引入,其中url為相對路徑或絕對路徑。

第四:這時,我們就可以在css中透過font-family來加入自己的個人化字體了。

這是未使用自訂字體之前的文字:

css怎麼自訂字體

#這是使用了自訂字體之後的文字:

css怎麼自訂字體

#(學習影片分享:css影片教學

以上是css怎麼自訂字體的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板