Phông chữ tùy chỉnh sẽ không xuất hiện. Chạy qua MIME, Hàm và Gia đình phông chữ. Không may mắn

Question

Làm việc với trang web WordPress. Tôi có thể cắm liên kết phông chữ vào thanh url của trình duyệt và phông chữ tự động tải xuống để tôi tin rằng nó được liên kết chính xác.

Tôi có tất cả phông chữ tùy chỉnh trong biểu định kiểu riêng trong thư mục phông chữ tùy chỉnh mà tôi đã sử dụng @import để liên kết, chúng xuất hiện trong nguồn trình duyệt của tôi, vì vậy tôi nghĩ rằng hãy kiểm tra. Bây giờ, trong khi khắc phục sự cố, tôi đặt một phông chữ trực tiếp trong tệp CSS chủ đề con chính của tôi. Tôi sẽ bao gồm mã đó bên dưới.

@font-face { 
    font-family: 'Blackout Sunrise'; 
    scr: url('blackout_sunrise-webfont.eot'); 
    scr: url('blackout_sunrise-webfont.eot?#iefix') format('embedded-opentype'), 
    url('blackout_sunrise-webfont.woff') format('woff'), 
    url('blackout_sunrise-webfont.ttf') format('truetype'), 
    url('blackout_sunrise-webfont.svg') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Tôi đã dành cả ngày đọc và xem video cố gắng tìm hiểu xem vấn đề có thể là gì. Điều đó dẫn tôi đến MIME. Tôi đã thêm các loại MIME tùy chỉnh trong các cài đặt ngụy trang Apache & lưu trữ của mình. Tôi cũng đã thêm các loại MIME tương tự này ở đầu tệp .htaccess của tôi vào thư mục gốc của trang web, ngay phía trên "# BEGIN WordPress". Dưới đây là cách tôi đã thêm chúng ở cả hai vị trí:

AddType application/vnd.ms-fontobject .eot 
AddType font/ttf .ttf 
AddType font/otf .otf 
AddType application/x-font-woff .woff 
AddType image/svg+xml svg 
AddType image/svg+xml svgz 

Không có bất kỳ may mắn nào. Trong một diễn đàn mà họ nói rằng bạn có thể cần thêm hỗ trợ kiểu MIME mới trong functions.php vì vậy tôi thêm mã này dưới đây vào child theme của tôi:

function my_myme_types($mime_types){ 
    $mime_types['eot'] = 'application/vnd.ms-fontobject'; //Adding avi extension 
    $mime_types['ttf'] = 'font/ttf'; 
    $mime_types['otf'] = 'font/otf'; 
    $mime_types['woff'] = 'application/x-font-woff'; 
    $mime_types['svg'] = 'image/svg+xml'; 
    $mime_types['svgz'] = 'image/svg+xml'; 
    return $mime_types; 
    } 
    add_filter('upload_mimes', 'my_myme_types', 1, 1); 

Vẫn không có gì. Tôi không biết phải làm gì tiếp theo hoặc nơi tôi có thể đã đi sai. Đã dành 8 giờ hôm nay để tìm ra điều này. Tôi đang làm việc với một chủ đề trẻ em. Là .htaccess ở đúng nơi, tôi có cần tạo một cái mới không? Nếu tôi tìm một giải pháp tôi sẽ đăng vào ngày mai. Mọi sự trợ giúp sẽ rất được trân trọng. (nghĩ rằng đây sẽ là phần dễ dàng)

8/27/16 - tiến trình.

Khám phá thêm hôm nay. Tôi di chuyển phông chữ của tôi xung quanh để giảm bớt cơ hội lỗi đường dẫn tệp. Một số diễn đàn sử dụng trích dẫn bên trong dấu ngoặc đơn của url và những người khác thì không. Tôi đã thử cả hai. Một diễn đàn đã thu hút sự chú ý đến các đặc quyền "đọc và ghi" của tập tin. "Tôi" có đặc quyền đọc-ghi và tôi đã thay đổi "nhân viên" để có đặc quyền đọc-ghi là tốt, để lại "mọi người" để chỉ đọc như diễn đàn được đề xuất. Sau đó tôi tải lại tệp lên máy chủ. Không khắc phục được sự cố.

Đây là một bài viết tuyệt vời: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

tôi đã không khai báo một #ID svg trong @ font-face của tôi và họ sử dụng một kỹ thuật khác nhau chống IE mà dường như nó có thể hiệu quả hơn. Đây là nơi tôi đang ở hiện nay:

@font-face { 
    font-family: 'Blackout Sunrise'; 
    scr: url('type/blackout_sunrise-webfont.eot'); 
    scr: local("☺"), 
    url('type/blackout_sunrise-webfont.woff') format('woff'), 
    url('type/blackout_sunrise-webfont.ttf') format('truetype'), 
    url('type/blackout_sunrise-webfont.svg#BlackoutSunrise') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

.practice-font h3 { 
    font-family: 'Blackout Sunrise'; 
    color: #8b0000; 
    text-transform: uppercase; 
    border: 1px solid green; 
    letter-spacing: 3px; 
} 

Tôi cũng phát hiện ra rằng tôi có thể có tên MIME sai do thông tin này: http://www.jbarker.com/blog/2009/mime-type-css-web-fonts

Vì vậy, Tôi đã tải lên hai loại MIME mới ngoài đến trên các loại MIME trong cài đặt Apache & lưu trữ nginx và tệp htaccess gốc của tôi.

AddType application/vnd.ms-fontobject .eot 
AddType application/octet-stream .otf .ttf 

Diễn đàn đã nói về tốc độ tải chậm với phông chữ tùy chỉnh và nếu trình duyệt mất quá nhiều thời gian thì chúng sẽ tải phông chữ mặc định vào vị trí của chúng. Không biết cách kiểm tra điều đó.

Tôi đã tải lên một phông chữ google và đã làm việc với bộ công cụ typekit và làm việc đó trong vài phút.Vẫn không có ý tưởng những gì tôi đang làm sai với những @ font-phải đối mặt với

Answer 1

scr: url('blackout_sunrise-webfont.eot'); 
scr: url('blackout_sunrise-webfont.eot?#iefix') format('embedded-opentype') 

Chú ý đến scr. Phải có src

Nhưng, đó có thể chỉ là vấn đề đầu tiên.