Mengapa Kit @font-face Dipaparkan Berbeza pada Windows dan Mac?

Ketidaksamaan Anti-Aliasing dalam Kit @font-face merentas Windows dan Mac

Pelaksanaan kit @font-face menggunakan fon daripada Font Tupai boleh menyebabkan perbezaan ketara dalam pemaparan antara sistem pengendalian Windows dan Mac. Khususnya, fon mungkin mempamerkan ketebalan yang lebih ketara dan kekurangan kelancaran pada platform Windows.

Untuk menyelesaikan isu ini, didapati bahawa Chrome pada Windows khususnya tidak menyukai CSS lalai yang dijana oleh Font Squirrel. Penyelesaiannya terletak pada mengubah suai tertib sifat src dalam peraturan @font-face.

Dengan mengalihkan baris format SVG ke bahagian atas senarai, isu anti-aliasing boleh diselesaikan. Berikut ialah contoh kod @font-face yang diubah suai:

@font-face {
    font-family: 'HLC';
    src: url('/_styles/hlc/hl-webfont.svg#HLC') format('svg'),
         url('/_styles/hlc/hl-webfont.eot') format('embedded-opentype'),
         url('/_styles/hlc/hl-webfont.woff') format('woff'),
         url('/_styles/hlc/hl-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Pengubahsuaian ini telah terbukti berkesan dalam menyelesaikan jurang anti-aliasing antara sistem Windows dan Mac, memastikan fon mengekalkan tahap kelancaran dan kejelasan yang diingini .

Atas ialah kandungan terperinci Mengapa Kit @font-face Dipaparkan Berbeza pada Windows dan Mac?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!