Bagaimana untuk Mencapai Rendering Fon Konsisten Antara Windows dan macOS Menggunakan @font-face?

Menyelesaikan Ketidakkonsistenan Pemberian Fon Antara Windows dan macOS Menggunakan @font-face

Menggabungkan fon tersuai ke dalam reka bentuk web menggunakan @font-face ialah amalan biasa. Walau bagaimanapun, pengguna kadangkala menemui variasi halus dalam pemaparan fon antara sistem Windows dan macOS. Isu ini sering menjelma sebagai percanggahan dalam anti-aliasing, di mana fon kelihatan lebih tebal dan kasar pada Windows berbanding macOS.

Untuk menangani masalah ini, adalah penting untuk memahami bahawa penyemak imbas web mentafsir dan membuat fon secara berbeza merentas platform . Penyemak imbas pada Windows biasanya lebih suka fon TrueType (TTF), manakala penyemak imbas macOS memilih fon Web Open Font Format (WOFF) format fon untuk setiap platform. Dalam coretan kod yang disediakan, keutamaan Chrome untuk fon SVG berbanding format lain pada Windows adalah bermasalah.

Untuk membetulkannya, susun semula perisytiharan @font-face dengan meletakkan format fon SVG di bahagian atas senarai. Ini memastikan Chrome akan memuatkan dan memaparkan fon SVG, menghasilkan anti-aliasing yang konsisten merentas kedua-dua sistem Windows dan macOS:

Dengan melaksanakan pengubahsuaian mudah ini, pemaparan fon kini seharusnya konsisten dan anti- alias dengan betul pada Windows dan macOS, meningkatkan pengalaman pengguna merentas platform.

@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;
}

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Rendering Fon Konsisten Antara Windows dan macOS Menggunakan @font-face?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!