CSS @ font-face không hoạt động với Firefox, nhưng hoạt động với Chrome và IE

Đoạn mã sau hoạt động trong Google Chrome beta cũng như IE 7. Tuy nhiên, Firefox dường như có vấn đề với điều này. Tôi nghi ngờ đây là vấn đề về cách bao gồm các tệp CSS của tôi, vì tôi biết Firefox không quá thân thiện với việc nhập tên miền chéo.

Nhưng đây hoàn toàn chỉ là HTML tĩnh và không có câu hỏi nào về tên miền chéo.

Trên trang đích của tôi.html Tôi thực hiện nhập CSS như vậy:

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

Trong main.css tôi có một mục nhập khác như vậy:

@import url("reset.css");
@import url("style.css");
@import url("type.css");

và trong type.css tôi có các khai báo sau:

@font-face {
    font-family: "DroidSerif Regular";
        src: url("font/droidserif-regular-webfont.eot");
        src: local("DroidSerif Regular"), 
                url("font/droidserif-regular-webfont.woff") format("woff"), 
                url("font/droidserif-regular-webfont.ttf")     format("truetype"), 
                url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q")     format("svg"); 
    font-weight: normal; font-style: normal; }
@font-face {
    font-family: "DroidSerif Bold";
    src: url("font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), 
        url("font/droidserif-bold-webfont.woff") format("woff"), 
        url("font/droidserif-bold-webfont.ttf") format("truetype"), 
        url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal; font-style: normal; }

body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }

Tôi có một thư mục gọi là "font" ở cùng vị trí với type.css. Thư mục phông chữ này chứa tất cả các tệp woff / ttf / svg, v.v.

Tôi đã bối rối về điều này. Nó hoạt động trong Chrome và IE nhưng không hoạt động trên Firefox . Sao có thể như thế được? Tôi đang thiếu gì?

ĐỊA ĐIỂM CHẠY TRANG WEB ( file:///)

Firefox đi kèm với file:///chính sách "file uri origin" ( ) rất nghiêm ngặt theo mặc định: để nó hoạt động giống như các trình duyệt khác, đi đến about:config, lọc theo fileurivà chuyển đổi tùy chọn sau:

security.fileuri.strict_origin_policy

Đặt nó thành false và bạn sẽ có thể tải tài nguyên phông chữ cục bộ qua các cấp đường dẫn khác nhau.

TRANG WEB XUẤT BẢN

Theo nhận xét của tôi dưới đây và bạn đang gặp vấn đề này sau khi triển khai trang web của mình, bạn có thể thử thêm một tiêu đề bổ sung để xem vấn đề của bạn có tự cấu hình thành vấn đề tên miền chéo hay không: vì bạn không chỉ định đường dẫn tương đối, nhưng dù sao tôi cũng sẽ thử: trong tệp .htaccess của bạn, chỉ định bạn muốn gửi một tiêu đề bổ sung cho mỗi tệp .ttf / .otf / .eot đang được yêu cầu:

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Thành thật mà nói, tôi sẽ không hy vọng nó sẽ tạo ra bất kỳ sự khác biệt nào, nhưng thật đơn giản, nó đáng để thử: người khác thử sử dụng mã hóa base64 cho kiểu chữ phông chữ của bạn, xấu nhưng nó cũng có thể hoạt động.

Một bản tóm tắt tốt đẹp có sẵn ở đây

Ngoài việc thêm các mục sau vào .htaccess của bạn: (cảm ơn @Manuel)

<FilesMatch "\.(ttf|otf|eot)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

Bạn có thể muốn thử rõ ràng thêm các loại mime webfont vào tệp .htaccess ... như thế này:

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

Cuối cùng, tệp .htaccess của tôi trông như thế này (đối với phần cho phép các webfont hoạt động trong tất cả các trình duyệt)

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

# END REQUIRED FOR WEBFONTS

Tôi cũng có vấn đề này. Tôi tìm thấy câu trả lời ở đây: http://www.dynamicdrive.com/forums/showthread.php?t=63628

Đây là một ví dụ về giải pháp hoạt động trên firefox, bạn cần thêm dòng này vào mặt phông chữ css:

src: local(font name), url("font_name.ttf");

Tôi sẽ chỉ để lại ở đây vì đồng nghiệp của tôi đã tìm ra giải pháp cho một vấn đề "khuôn mặt phông chữ không hoạt động trên firefox nhưng ở mọi nơi khác".

Vấn đề chỉ là Firefox rối tung với tuyên bố họ phông chữ, điều này cuối cùng đã sửa nó:

body{ font-family:"MyFont" !important; }

PS: Tôi cũng đang sử dụng html5boilerplate.

Tôi đã có cùng một vấn đề. Kiểm tra kỹ mã của bạn để tìm H1, H2 hoặc bất kỳ kiểu nào bạn đang nhắm mục tiêu với quy tắc khuôn mặt @ phông chữ. Tôi thấy mình bị hôn mê sau khi font-family: 'custom-font-family' Arial, Helvetica etcnó xuất hiện tốt ở mọi trình duyệt ngoài Firefox. Tôi đã thêm hôn mê và nó đã làm việc.

Tôi đã có cùng vấn đề y hệt. Tôi đã phải tạo một thư mục mới gọi là "phông chữ" và đặt nó vào wp_content. Tôi có thể truy cập nó từ trình duyệt của mình như thế này http://www.example.com/wp-content/fonts/CANDY.otf

Trước đây, thư mục phông chữ nằm trong cùng thư mục với tệp CSS của tôi và mặt chữ @ trông giống như sau:

@font-face { 
    font-family: CANDY;
    src: url("fonts/CANDY.otf");
}

Như tôi đã đề cập ở trên, điều này không hoạt động trong Firefox mà chỉ với Chrome. Bây giờ nó đang hoạt động vì tôi đã sử dụng một đường dẫn tuyệt đối:

@font-face { 
    font-family: CANDY;
    src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}

Tôi đã có chính xác vấn đề này khi chạy ff4 trên máy mac. Tôi đã có một máy chủ phát triển cục bộ đang chạy và khai báo @ font-face của tôi hoạt động tốt. Tôi đã di chuyển sang trực tiếp và FF sẽ 'flash' đúng loại khi tải trang đầu tiên, nhưng khi điều hướng sâu hơn, kiểu chữ được mặc định cho biểu định kiểu trình duyệt.

Tôi tìm thấy giải pháp nằm trong việc thêm khai báo sau vào .htaccess

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

tìm thấy qua

Một giải pháp dễ dàng mà chưa ai nhắc đến là nhúng phông chữ trực tiếp vào tệp css bằng mã hóa base64.

Nếu bạn đang sử dụng fontquirrel.com, trong Trình tạo Kit mặt chữ chọn chế độ chuyên gia , cuộn xuống và chọn Mã hóa Base64 trong Tùy chọn CSS - Bộ phông chữ đã tải xuống sẽ sẵn sàng để cắm và phát.

Điều này cũng có lợi ích bên lề là giảm thời gian tải trang vì nó yêu cầu một yêu cầu http ít hơn.

Tôi muốn đề cập rằng một số phông chữ có vấn đề trong firefox nếu tên tệp của chúng chứa các ký tự cụ thể. Gần đây tôi đã gặp phải một vấn đề với phông chữ 'Modulus' có tên tệp '237D7B_0_0'. Loại bỏ các dấu gạch dưới trong tên tệp và cập nhật css để khớp với tên tệp mới đã giải quyết vấn đề này. Các phông chữ khác có ký tự tương tự không có vấn đề này rất gây tò mò ... có thể là một lỗi trong firefox. Tôi khuyên bạn nên giữ tên tệp chỉ cho các ký tự chữ và số.

Đối với phông chữ này nói riêng, bạn nên sử dụng API Google Font:

http://code.google.com.vn/webfonts/family?family=Droid+Sans

Nếu bạn vẫn muốn sử dụng trình tạo bộ công cụ của FontSquirrel, hãy sử dụng tùy chọn hack Smiley để loại bỏ các vấn đề về phông chữ cục bộ. Sau khi bạn đã tạo một bộ công cụ, hãy kiểm tra xem demo.html đã tạo có hoạt động trong FireFox không. Tôi đặt cược nó làm. Bây giờ hãy tải nó lên máy chủ của bạn - Tôi cá là nó cũng hoạt động ở đó vì FontSquirrel rất tuyệt vời.

Tuy nhiên, nếu bạn đã phá vỡ mã bộ công cụ đã tạo trong khi tích hợp nó vào dự án của mình, hãy sử dụng các phương pháp gỡ lỗi tiêu chuẩn - kiểm tra 404 và đi từng dòng cho đến khi bạn tìm thấy sự cố. WOFF chắc chắn nên hoạt động trong FF, vì vậy đó là một nơi tốt để bắt đầu.

Cuối cùng, nếu không có cái nào hoạt động, hãy cập nhật FireFox. Tôi đã viết tất cả điều này giả sử rằng bạn đang sử dụng mới nhất; nhưng bạn đã không chỉ định phiên bản nào bạn đang đăng ký, vì vậy đó cũng có thể là vấn đề của bạn.

Hãy thử nerfing khai báo nguồn cục bộ trong của bạn @font-face chỉ thị .

Có một lỗi đã biết trong Firefox hoặc API Phông chữ của Google ngăn các biến thể của phông chữ được sử dụng nếu phông chữ được cài đặt cục bộ và khớp với tên cục bộ đã xác định:

http://code.google.com.vn/p/googlefontdirectory/issues/detail?id=13

Để hiệu quả khai báo cục bộ, chỉ cần làm cho chuỗi nguồn cục bộ của bạn trở nên vô nghĩa. Quy ước được chấp nhận chung cho việc này là sử dụng ký tự unicode mặt cười ( "☺"). Tại sao? Paul Irish có một lời giải thích tuyệt vời trên blog của mình:

http://paulirish.com/2010/font-face-gotchas/#smiley

Bạn đang kiểm tra điều này trong các tệp cục bộ hoặc tắt máy chủ Web? Các tệp trong các thư mục khác nhau được coi là các miền khác nhau cho các quy tắc tên miền chéo, vì vậy nếu bạn đang kiểm tra cục bộ, bạn có thể gặp phải các hạn chế tên miền chéo.

Nếu không, nó có thể sẽ được chỉ ra một URL nơi xảy ra sự cố.

Ngoài ra, tôi khuyên bạn nên xem bảng điều khiển lỗi Firefox để xem có lỗi cú pháp CSS hoặc lỗi nào khác được báo cáo không.

Ngoài ra, tôi lưu ý rằng bạn có thể muốn có trọng số phông chữ: in đậm trong quy tắc khuôn mặt @ phông chữ thứ hai.

Sử dụng .htaccess Kiểm soát truy cập Cho phép quy tắc Xuất xứ không hoạt động đối với tôi khi tôi gặp phải vấn đề này.

Thay vào đó, trong IIS trong web.config chèn khối system.webServer hiển thị bên dưới.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

Điều này làm việc như một cơ duyên đối với tôi. Nếu bạn cần hạn chế quyền truy cập vào tên miền cụ thể, hãy thay thế * bằng tên miền.

Tôi gặp vấn đề tương tự khi có một phông chữ để hiển thị đúng trong Firefox. Đây là những gì tôi tìm thấy để làm việc cho tôi. Thêm dấu gạch chéo trước khi thư mục giữ phông chữ trong thuộc tính url. Đây là phiên bản trước và sau của tôi:

B E F O R E:
   @font-face
{   font-family: "GrilledCheese BTN";
    src: url(fonts/grilcb__.ttf);
}

A F T E R:
@font-face
{   font-family: "GrilledCheese BTN";
    src: url(/fonts/grilcb__.ttf);
}

Lưu ý dấu gạch chéo hàng đầu trước 'phông chữ' trong url? Điều này báo cho trình duyệt bắt đầu tại thư mục gốc và sau đó truy cập tài nguyên. Ít nhất là đối với tôi - Vấn đề được giải quyết.

Nếu bạn đang cố gắng nhập phông chữ bên ngoài, bạn sẽ gặp một trong những vấn đề phổ biến nhất với Firefox và trình duyệt khác. Đôi khi phông chữ của bạn hoạt động tốt trong google Chrome hoặc một trong những trình duyệt khác nhưng không phải trong mọi trình duyệt.

Có rất nhiều lý do cho loại lỗi này, một trong những lý do lớn nhất đằng sau vấn đề này là phông chữ được xác định trước đó. Bạn cần thêm! Từ khóa quan trọng sau khi kết thúc mỗi dòng mã CSS của bạn như sau:

Thí dụ:

@font-face
{
    font-family:"Hacen Saudi Arabia" !important;
    src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important;
    src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important;
    src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important;
    src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important;
}
.sample
{
    font-family:"Hacen Saudi Arabia" !important;
}

Mô tả: Nhập mã ở trên vào tệp CSS hoặc mã của bạn ở đây. Trong ví dụ trên, thay thế "Hacen Saudi Arabia" bằng họ phông chữ của bạn và thay thế url theo thư mục phông chữ của bạn.

Nếu bạn nhập! Quan trọng trong trình duyệt mã css của bạn sẽ tự động tập trung vào phần này và ghi đè lên thuộc tính được sử dụng trước đó. Để biết thêm chi tiết, hãy truy cập: https://answerdone.blogspot.com/2017/06/font-face-not-usiness-solution.html

Bạn có thể kiểm tra với fireorms nếu bạn nhận được một số 404? Tôi đã gặp sự cố trong pass và tôi thấy rằng phần mở rộng là như nhau nhưng file linux.ttf khác với file.TTF ... và nó hoạt động với tất cả các trình duyệt ngoại trừ firefox.

Chúc nó giúp!

Đây là một vấn đề với cách bạn thiết lập đường dẫn của khuôn mặt phông chữ của bạn. Vì bạn không bắt đầu đường dẫn bằng "/", Firefox sẽ cố gắng tìm phông chữ dựa trên đường dẫn của biểu định kiểu. Vì vậy, về cơ bản, Firefox đang tìm kiếm phông chữ của bạn trong thư mục "root / css / font" thay vì thư mục "root / font". Bạn có thể dễ dàng sửa lỗi này bằng cách di chuyển thư mục phông chữ sang thư mục css hoặc thêm / vào đầu đường dẫn phông chữ của bạn.

Thử thứ này đi:

@font-face {
    font-family: "DroidSerif Regular";
    src: url("/font/droidserif-regular-webfont.eot");
    src: local("DroidSerif Regular"), url("/font/droidserif-regular-webfont.woff") format("woff"), url("/font/droidserif-regular-webfont.ttf") format("truetype"), url("/font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "DroidSerif Bold";
    src: url("/font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), url("/font/droidserif-bold-webfont.woff") format("woff"), url("/font/droidserif-bold-webfont.ttf") format("truetype"), url("/font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}


body {
    font-family: "DroidSerif Regular" , serif;
}
h1 {
    font-weight: bold;
    font-family: "DroidSerif Bold";
}

Thử cái này....

http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/

Tôi đã có một vấn đề tương tự. Trang demo của phông chữ đã hoạt động trong FF nhưng không phải trang của riêng tôi mặc dù tất cả các tệp đều đến từ cùng một tên miền!

Hóa ra tôi đã liên kết biểu định kiểu của mình với một URL tuyệt đối (http://example.com/style.css) để FF nghĩ rằng nó đến từ một tên miền khác. Thay đổi biểu định kiểu của tôi link href thành /style.css thay vào đó là những thứ cố định cho tôi.

Có lẽ vấn đề của bạn là một vấn đề đặt tên, đặc biệt liên quan đến việc sử dụng (hoặc không) không gian và dấu gạch nối.

Tôi đã có vấn đề về similair, mà tôi nghĩ rằng tôi đã sửa bằng cách đặt tùy chọn trích dẫn (') xung quanh tên phông chữ / tên gia đình, nhưng điều đó thực sự đã khắc phục vấn đề đặt tên.

Tôi không hoàn toàn cập nhật về đặc tả CSS và có (một chút cho tôi) sự mơ hồ trong cách các khách hàng khác nhau diễn giải các thông số kỹ thuật. Ngoài ra, nó cũng có vẻ liên quan đến các quy ước đặt tên PostScript, nhưng vui lòng sửa cho tôi nếu tôi sai!

Dù sao như tôi hiểu bây giờ, tuyên bố của bạn đang sử dụng hỗn hợp của hai hương vị riêng biệt có thể.

@font-face {
  font-family: "DroidSerif Regular";

Nếu bạn coi Droid là tên gia đình thực tế, trong đó Sans và Serif là thành viên, chẳng hạn như con cái của họ Sans Thường xuyên hoặc Serif Bold , thì bạn có thể sử dụng khoảng trắng ở mọi nơi để kết hợp các số nhận dạng, HOẶC bạn xóa khoảng trắng và sử dụng CamelCasing cho FamilyName và dấu gạch nối cho định danh phụ.

Áp dụng cho tuyên bố của bạn, nó sẽ trông giống như thế này:

@font-face {
  font-family: "Droid Serif Regular";

HOẶC LÀ

@font-face {
  font-family: DroidSerif-Regular;

Tôi nghĩ cả hai nên hoàn toàn hợp pháp, dù có hoặc không có dấu ngoặc kép, nhưng tôi đã thành công lẫn lộn với điều đó giữa các khách hàng khác nhau. Có lẽ, một ngày nào đó, tôi có một chút thời gian để tìm hiểu chi tiết về điều này / những isseu / s này.

Tôi thấy bài viết này hữu ích trong việc tìm hiểu một số khía cạnh liên quan: http://mathiasbynens.be/notes/unquote-font-f Family

Bài viết này có một số chi tiết cụ thể hơn về PostScript và một số liên kết đến một đặc tả Adobe PDF: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/

Không cần phải loay hoay với các cài đặt, chỉ cần xóa dấu ngoặc kép và dấu cách khỏi họ phông chữ:

điều này

body {font-family: "DroidSerif Regular", serif; }

trở thành cái này

body {font-family: DroidSerifRegular, serif; }

Trong trường hợp của tôi, tôi đã giải quyết vấn đề với việc chèn mã kiểu mặt chữ

<style type="text/css">
@font-face { 
font-family: 'Amazone';font-style: normal; 
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/ 
src: local('Amazone'), url(font/Amazone.woff) format('woff');} 
</style>

direclty trong tiêu đề trên trang index.html hoặc trang php của bạn, trong thẻ kiểu. Làm việc cho tôi!

Do đó, đây là một trong những kết quả hàng đầu của Google cho vấn đề này, tôi muốn thêm những gì đã giải quyết vấn đề này cho tôi:

Tôi đã phải xóa định dạng (opentype) khỏi src của mặt phông chữ, sau đó nó cũng hoạt động trong Firefox. Nó đã hoạt động tốt trong Chrome và Safari trước đó.

Có thể không phải vì mã của bạn, mà là do cấu hình Firefox của bạn.

Hãy thử điều này từ Tool bar phương Tây sang Unicode

View > Text Encoding > Unicode

Tôi đã có cùng một vấn đề và giải quyết nó bằng cách thêm meta cho nội dung:

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

Điều này xảy ra trong Firefox và Edge nếu bạn có văn bản Unicode trong html.

Tôi không biết bạn đã tạo cú pháp như thế nào khi tôi đã sử dụng svg trong khai báo phông chữ, nhưng Font Squirel có một công cụ thực sự tốt để tạo một khuôn mặt cú pháp bằng chứng từ chỉ một phông chữ.

http://www.fontsquirrel.com/fontface/generator

Cũng có thể là việc sử dụng URL trong đường dẫn của thẻ mặt phông chữ. Nếu bạn sử dụng "http://domain.com" thì nó không hoạt động trong Firefox, đối với tôi, việc đổi nó thành "http://www.domain.com" đã hoạt động.

Vấn đề của tôi là Windows đã đặt tên cho phông chữ là 'font.TTF' và firefox mong đợi 'font.ttf' tôi thấy rằng sau khi mở dự án của mình trong linux, đã đổi tên phông chữ thành tên propper và mọi thứ đều hoạt động