Làm cách nào để sử dụng phông chữ .woff cho trang web của tôi?

Bạn đặt phông chữ ở đâu để CSS có thể truy cập chúng?

Tôi đang sử dụng phông chữ không chuẩn cho trình duyệt trong tệp .woff. Giả sử 'awesome-font' của nó được lưu trữ trong một tệp 'awesome-font.woff'.

Sau khi tạo các tệp woff, bạn phải xác định font-family, có thể được sử dụng sau này trong tất cả các kiểu css của bạn. Dưới đây là mã xác định họ phông chữ (cho các kiểu chữ bình thường, đậm, đậm-nghiêng, nghiêng). Giả định rằng có 4 tệp * .woff (cho các kiểu chữ đã đề cập), được đặt trong fontsthư mục con.

Trong mã 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;
}

Sau khi có các định nghĩa đó, bạn chỉ có thể viết, ví dụ:

Trong mã 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>

Trong mã CSS:

.mydiv {
    font-family: myfont
}

Công cụ tốt để tạo các tệp woff, có thể được bao gồm trong các bảng định kiểu CSS nằm ở đây . Không phải tất cả các tệp woff đều hoạt động chính xác trong các phiên bản Firefox mới nhất và trình tạo này tạo ra các phông chữ 'đúng'.

Bạn cần khai báo @font-facenhư thế này trong biểu định kiểu của mình

@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');
}

Bây giờ nếu bạn muốn áp dụng phông chữ này cho một đoạn văn, chỉ cần sử dụng nó như thế này ..

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

Tham khảo thêm