ฉันจะใช้ฟอนต์. woff สำหรับเว็บไซต์ของฉันได้อย่างไร?

คุณวางฟอนต์ไว้ที่ไหนเพื่อให้ CSS เข้าถึงได้?

ฉันใช้แบบอักษรที่ไม่ได้มาตรฐานสำหรับเบราว์เซอร์ในไฟล์. woff สมมติว่า "ฟอนต์น่ากลัว" เก็บไว้ในไฟล์ "awesome-font.woff"

หลังจากสร้างไฟล์ woff คุณต้องกำหนดตระกูลฟอนต์ซึ่งสามารถใช้ได้ในภายหลังในรูปแบบ css ทั้งหมดของคุณ ด้านล่างนี้คือโค้ดสำหรับกำหนดตระกูลฟอนต์ (สำหรับฟอนต์ปกติตัวหนาตัวเอียงตัวเอียง) สันนิษฐานว่ามีไฟล์ 4 * .woff (สำหรับแบบอักษรที่กล่าวถึง) อยู่ในfontsไดเร็กทอรีย่อย

ในโค้ด CSS:

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font.woff") format('woff');
}

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font-bold.woff") format('woff');
    font-weight: bold;
}

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font-boldoblique.woff") format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font-oblique.woff") format('woff');
    font-style: italic;
}

หลังจากมีคำจำกัดความแล้วคุณสามารถเขียนตัวอย่างเช่น

ในโค้ด HTML:

<div class="mydiv">
    <b>this will be written with awesome-font-bold.woff</b>
    <br/>
    <b><i>this will be written with awesome-font-boldoblique.woff</i></b>
    <br/>
    <i>this will be written with awesome-font-oblique.woff</i>
    <br/>
    this will be written with awesome-font.woff
</div>

ในโค้ด CSS:

.mydiv {
    font-family: myfont
}

เครื่องมือที่ดีสำหรับไฟล์รุ่น WOFF ซึ่งสามารถรวมอยู่ในสไตล์ชีต CSS ตั้งอยู่ที่นี่ ไฟล์ woff บางไฟล์ไม่ทำงานอย่างถูกต้องภายใต้ Firefox เวอร์ชันล่าสุดและตัวสร้างนี้จะสร้างแบบอักษรที่ 'ถูกต้อง'

คุณต้องประกาศ@font-faceเช่นนี้ในสไตล์ชีตของคุณ

@font-face {
  font-family: 'Awesome-Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome-Font'), local('Awesome-Font-Regular'), url(path/Awesome-Font.woff) format('woff');
}

ตอนนี้ถ้าคุณต้องการใช้แบบอักษรนี้กับย่อหน้าให้ใช้แบบนี้ ..

p {
font-family: 'Awesome-Font', Arial;
}

ข้อมูลอ้างอิงเพิ่มเติม