Bagaimana untuk Memasukkan Fon Tersuai Menggunakan .ttf dan Memastikan Keserasian Merentas Pelayar?

Termasuk Fon Tersuai Menggunakan .ttf dan CSS

Anda ingin memasukkan fon .ttf ke dalam halaman web anda tetapi menghadapi kesukaran. Mari kita periksa kod anda:

<code class="css">@font-face {
    font-family: 'oswald';
    src: url('/font/oswald.regular.ttf');
}</code>

Di manakah Isunya?

Memasukkan hanya fail .ttf tidak mencukupi untuk keserasian merentas penyemak imbas. Untuk merangkumi pelbagai jenis penyemak imbas, anda memerlukan berbilang format fon.

Penyelesaian Komprehensif:

<code class="css">@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}</code>

Kod ini menganggap anda mempunyai .eot, .woff, . ttf dan format SVG untuk fon web anda. Penjana fon web seperti Font Squirrel atau Transfonter boleh mengautomasikan proses ini.

Pendekatan Moden:

Pelayar moden lebih suka fon .woff, jadi anda juga boleh memudahkan kod anda:

<code class="css">@font-face {
    font-family: 'MyWebFont';
    src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}</code>

Sumber Tambahan:

• Helah CSS: Menggunakan @font-face: https://css-tricks.com/snippets/css/using -font-face/
• Bolehkah saya Guna fontface: https://caniuse.com/fontface

Atas ialah kandungan terperinci Bagaimana untuk Memasukkan Fon Tersuai Menggunakan .ttf dan Memastikan Keserasian Merentas Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!