Di Chrome @font-face local() tidak menemukan font lokal

Google Chrome tidak menggunakan font dari sistem lokal dan mengunduh dari server, namun Firefox menggunakannya dengan benar dari sistem lokal.

Seperti yang saya lihat di DevTools, font diunduh dari server: DevTools -> Computed -> Rendered Font [img]

Di Firefox saya melihat, kami menggunakan font lokal: FirefoxTools -> Fonts[img]

@font-face {
  font-family: 'Calibri';
  src:  local(Calibri Italic),
        local(Calibri-Italic),
        url('../fonts/calibrii.woff2') format('woff2'), 
        url('../fonts/calibrii.woff') format('woff'), 
        url('../fonts/calibrii.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

Ini tidak berfungsi jika saya menggunakan Calibri Italic (atau Calibri Bold, 'Calibri Italic', 'Calibri-Italic', dll.). Jika saya mengetik local(Calibri), di kedua browser fontnya akan lokal.


google-chrome html fonts css font-face
person Artem Tarasov    schedule 07.02.2018    source sumber
comment
Saya memiliki masalah yang persis sama (hanya dengan font yang berbeda). Dari pengalaman saya itu hanya terjadi di Chrome/Windows. Font lokal teratasi dengan benar di Chrome/Mac dan browser lainnya.   -  person TMG    schedule 13.09.2018
comment
Ini merupakan masalah bagi saya di Chromium 73 tetapi tidak 80   -  person binaryfunt    schedule 01.03.2020

Jawaban (1)


arrow_upward
7
arrow_downward

Chrome mengalami masalah dalam mencocokkan nama font lokal, seperti yang dijelaskan dalam laporan bug ini. Singkatnya, hal ini disebabkan oleh apa yang browser anggap sebagai nama untuk sebuah font. Chrome mengharapkan nama "root" (dalam kasus Anda, Calibri) dan menguranginya memerlukan versi miring dari aturan @font-face Anda. Firefox melakukan yang sebaliknya: ia langsung mencari namanya. Komentar ini menunjukkan hal itu.

Jadi sepertinya satu pendekatan rusak di Chrome, yang lain di Firefox, hingga bug ini diperbaiki. Saya kira terserah Anda untuk menentukan perilaku browser mana yang ingin Anda ikuti.

person RoelN    schedule 01.04.2019
comment
Apakah mungkin menggunakan kedua jenis referensi dan memuat font? - person David; 03.04.2019
comment
Solusi yang mungkin dilakukan adalah dengan mendeklarasikan dua jenis font yang merujuk pada font lokal, Calibri-Chrome dan Calibri-Firefox dan memasukkannya ke dalam tumpukan font Anda. Kemudian tambahkan yang ketiga, Calibri-web ketika keduanya gagal dimuat. Saya belum mengujinya, tapi saya rasa bisa berfungsi seperti itu. - person RoelN; 03.04.2019