怎么引入多個(gè)字體并使用？ - css筆記

在頁(yè)面中使用不同的字體可以讓你的網(wǎng)頁(yè)與眾不同。一起來(lái)看看怎么在css中引入多個(gè)字體并使用吧。

• 原文來(lái)源：博客園
• 字體相關(guān)：菜鳥(niǎo)學(xué)院

注意字體版權(quán)

首先，我們可以通過(guò)以下代碼來(lái)引入字體文件

/* 定義字體 */
@font-face{
	font-family: "悅圓常規(guī)";
	src: url("./font/悅圓常規(guī).otf");
  }

其中font-family就是之后使用時(shí)候的字體名稱了，如此一來(lái)CSS中就可以直接使用本地的字體了，如下：

font-family: "悅圓常規(guī)";

以下是一個(gè)簡(jiǎn)單的代碼演示，實(shí)際效果見(jiàn)頁(yè)底

HTML

<div class="box">
    <div class="box-one">
        <h3>字體：Barlow-Regular</h3>
        舉杯邀明月，對(duì)影成三人。
        Raise a glass to invite the moon, and make three for the shadow.
    </div>
    <div class="box-two">
        <h3>字體：butler-bold</h3>
        舉杯邀明月，對(duì)影成三人。
        Raise a glass to invite the moon, and make three for the shadow.
    </div>
    <div class="box-three">
        <h3>字體：悅圓常規(guī)</h3>
        舉杯邀明月，對(duì)影成三人。
        Raise a glass to invite the moon, and make three for the shadow.
    </div>
    <div class="box-fore">
        <h3>字體：方正大黑簡(jiǎn)體</h3>
        舉杯邀明月，對(duì)影成三人。
        Raise a glass to invite the moon, and make three for the shadow.
    </div>
    <h3>字體：無(wú)</h3>
    舉杯邀明月，對(duì)影成三人。
    Raise a glass to invite the moon, and make three for the shadow.
</div>

CSS

/*
 *引入字體
 */
 @font-face{
	font-family: "Barlow-Regular";
	src: url("./font/Barlow-Regular.ttf");
  }

@font-face{
    font-family: "butler-bold";
    src: url("./font/butler-bold.ttf");
}


@font-face{
	font-family: "悅圓常規(guī)";
	src: url("./font/悅圓常規(guī).otf");
  }

@font-face{
	font-family: "方正大黑簡(jiǎn)體";
	src: url("./font/方正大黑簡(jiǎn)體.ttf");
}

/*
 *第一個(gè)盒子
 */
 .box-one {
    font-family: "Barlow-Regular";
 }

 .box-two {
    font-family: "butler-bold";
 }

 .box-three {
    font-family: "悅圓常規(guī)";
 }

 .box-fore {
    font-family: "方正大黑簡(jiǎn)體";
 }

當(dāng)然，在實(shí)際運(yùn)用中當(dāng)然沒(méi)這么簡(jiǎn)單，在真實(shí)的環(huán)境中一般是這樣的：

    @font-face{
        font-family:Avenir Next;
        src:url(../fonts/avenir-next/avenir-next-regular.eot);
        src:url(../fonts/avenir-next/avenir-next-regular.eot?#iefix) format("embedded-opentype"),
        url(../fonts/avenir-next/avenir-next-regular.woff2) format("woff2"),
        url(../fonts/avenir-next/avenir-next-regular.woff) format("woff"),
        url(../fonts/avenir-next/avenir-next-regular.ttf) format("truetype"),
        url(../fonts/avenir-next/avenir-next-regular.svg#svgFontName) format("svg");
        font-weight:400;
        font-style:normal;
    }

雖然都是字體文件，但是不同的格式在不同的環(huán)境下都有他獨(dú)特的作用。