@ font-face src: local - Làm thế nào để sử dụng phông chữ cục bộ nếu người dùng đã có nó?


81

Cách sử dụng đúng cách để @font-facetrình duyệt không tải xuống phông chữ nếu người dùng đã có nó?

Tôi đang sử dụng @ font-face để định nghĩa DejaVu, đã được cài đặt trên hệ thống của tôi (linux). Firefox không tải xuống phông chữ, nhưng Chromium luôn tải xuống phông chữ đó!

Mã CSS của tôi, dựa trên sóc phông chữcâu hỏi đó trông như thế này:

@font-face {
    font-family: 'DejaVu Serif';
    src: url('DejaVuSerif-webfont.eot');
    src: local('DejaVu Serif'), url('DejaVuSerif-webfont.woff') format('woff'), url('DejaVuSerif-webfont.ttf') format('truetype'), url('DejaVuSerif-webfont.svg#webfontCFu7RF0I') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ... @font-face definitions for italic and bold omitted ... */

@font-face {
    font-family: 'DejaVu Serif';
    src: url('DejaVuSerif-BoldItalic-webfont.eot');
    src: local('DejaVu Serif Bold Italic'), url('DejaVuSerif-BoldItalic-webfont.woff') format('woff'), url('DejaVuSerif-BoldItalic-webfont.ttf') format('truetype'), url('DejaVuSerif-BoldItalic-webfont.svg#webfontQAewh7pf') format('svg');
    font-weight: bold;
    font-style: italic;
}

Câu trả lời:


103

Nếu bạn muốn kiểm tra các tệp cục bộ, trước tiên hãy làm:

@font-face {
font-family: 'Green Sans Web';
src:
    local('Green Web'),
    local('GreenWeb-Regular'),
    url('GreenWeb.ttf');
}

Có một mô tả chi tiết hơn về những việc cần làm ở đây .


3
Điều gì sẽ xảy ra nếu chúng ta có 2 srcs (như trong ví dụ của OP)? Chúng ta đặt localcái đầu tiên hay cái thứ hai?
mpen

-7

Tôi chưa thực sự làm bất cứ điều gì font-face, vì vậy hãy xem điều này với một chút muối, nhưng tôi không nghĩ rằng có bất kỳ cách nào để trình duyệt xác định một cách dứt khoát nếu một phông chữ web nhất định được cài đặt trên máy của người dùng hay không.

Ví dụ, người dùng có thể cài đặt một phông chữ khác có cùng tên trên máy của họ. Cách duy nhất để phân biệt rõ ràng là so sánh các tệp phông chữ để xem chúng có giống nhau không. Và trình duyệt không thể làm điều đó nếu không tải xuống phông chữ web của bạn trước.

Firefox có tải xuống phông chữ khi bạn thực sự sử dụng nó trong một fontkhai báo không? (vd h1 { font: 'DejaVu Serif';)?


tốt, vấn đề tên phông chữ là tác động ngắn ở đây tôi đoán (tôi không bao giờ có bất kỳ vấn đề với nó)
Thariama

Vâng, tôi đoán là không xảy ra va chạm. Tiếp tục.
Paul D. Waite,

5
font / font-family trong css không làm cho trình duyệt tải xuống bất cứ thứ gì. Nếu nó không tìm thấy phông chữ cục bộ, nó sẽ bỏ qua nó. Đó là lý do tại sao chúng ta thường sử dụng một ngăn xếp phông chữ (một danh sách các phông chữ) - nếu nó không có cái đầu tiên, nó sẽ thử cái thứ hai, v.v. @ font-face là một cái gì đó tương đối "mới" ( stackoverflow.com/questions/2219916/is-font-face-usable-now )
dbarbosa

@dbarbosa: Tôi biết cách font/ font-familyhoạt động. Tôi chỉ rõ ràng không biết làm thế nào @font-facehoạt động!
Paul D. Waite
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.