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

Question

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. Hãy nói 'awesome-font' của nó được lưu trữ trong một tập tin 'awesome-font.woff'.

Answer 1

Sau khi tạo các tệp woff, bạn phải xác định họ phông chữ, có thể 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 các phông chữ phông chữ (cho chữ thường, đậm, in nghiêng, nghiêng). Giả sử rằng có 4 * tệp .offoff (cho các kiểu chữ được đề cập), được đặt trong thư mục con fonts.

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 mà định nghĩa, bạn chỉ có thể viết, ví dụ,

Trong 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 cho các tệp woff thế hệ, có thể được bao gồm trong các tệp định kiểu CSS có vị trí here. 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à máy phát điện này tạo ra các phông chữ 'đúng'.

Answer 2

Bạn cần phải tuyên bố @font-face như thế này trong stylesheet của bạn

@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 font chữ này cho một đoạn chỉ cần sử dụng nó như thế này ..

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

More Reference