Mengapa Fon Render Berbeza pada Windows dan Mac?

Ketidakkonsistenan Penyampaian Fon Merentas Platform: Menyelesaikan Percanggahan Anti-Aliasing @font-face antara Windows dan Mac

Dalam bidang silang- pembangunan web platform, mencapai pemaparan fon yang konsisten merentas sistem pengendalian yang berbeza boleh menjadi tugas yang membingungkan. Satu isu biasa yang dihadapi dengan kit @font-face ialah penampilan fon yang berbeza-beza antara sistem Windows dan Mac.

Satu contoh tertentu perkara ini timbul apabila menggunakan fon yang dicipta oleh Fontsquirrel.com. Pembangun sering menghadapi percanggahan dalam anti-aliasing antara kedua-dua platform. Pada Windows, fon mungkin kelihatan lebih tebal dan kasar berbanding dengan rakan Mac mereka.

Penyelesaian: Mengutamakan Format Fon SVG untuk Chrome

Selepas penerokaan yang meluas, penyelesaian telah muncul yang menyelesaikan ketidakkonsistenan pemaparan fon merentas platform ini. Kuncinya terletak pada mengubah suai kod CSS yang dijana oleh Fontsquirrel.com.

Pada asalnya, kod CSS mengikut struktur ini:

@font-face {
    font-family: 'Font Name';
    src: url('font-file.eot');
    src: url('font-file.eot?#iefix') format('embedded-opentype'),
         url('font-file.woff') format('woff'),
         url('font-file.ttf') format('truetype'),
         url('font-file.svg#Font Name') format('svg');
    font-weight: normal;
    font-style: normal;
}

Walau bagaimanapun, untuk penyemak imbas Chrome pada Windows, adalah penting untuk utamakan format fon SVG dengan mengalihkan baris yang berkaitan ke permulaan senarai src:

/* THIS WORKS FOR ME */
@font-face {
    font-family: 'Font Name';
    src: url('font-file.svg#Font Name') format('svg'),
         url('font-file.eot') format('embedded-opentype'),
         url('font-file.woff') format('woff'),
         url('font-file.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Dengan mengutamakan format SVG untuk Chrome, penyemak imbas akan menjadikan fon dengan anti-aliasing optimum, menghasilkan penampilan yang konsisten pada kedua-dua sistem Windows dan Mac.

Atas ialah kandungan terperinci Mengapa Fon Render Berbeza pada Windows dan Mac?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!