Apakah fon selamat web dan fon sandaran dalam CSS?-tutorial css-php.cn

Apakah fon selamat web dan fon sandaran dalam CSS?

王林

Lepaskan： 2023-08-25 23:33:12

ke hadapan

1614 orang telah melayarinya

CSS 中的网络安全字体和后备字体是什么？

Tapak web ini direka untuk menyediakan pengguna dengan maklumat tentang syarikat, produk dan perkhidmatan. Mana-mana laman web perlu jelas dan cantik supaya pembaca dapat membalasnya. tipografi tapak web adalah faktor utama untuk menjadikannya konsisten dan memberikannya rasa estetik. Personaliti keseluruhan tapak web dibina oleh tipografi, yang penting dalam mewujudkan identiti jenama. Jika anda menggunakan tipografi yang unik dan konsisten, pengguna akan mula mengaitkan fon tertentu dengan jenama anda.

Apabila anda menggunakan tipografi yang baik, anda boleh mengekalkan minat pembaca dan memujuk mereka untuk kekal di tapak web anda lebih lama Dengan menghasilkan keseimbangan grafik yang kukuh dan hierarki visual yang kukuh, ia membantu dalam mewujudkan nada tapak web secara keseluruhan keputusan dibuat dan mempunyai impak yang ketara terhadap cara pembaca memproses dan mentafsir bahan teks Ia menjadikan kandungan menarik dan dengan itu memberi kesan dalam kebolehbacaan tapak web Melalui pelbagai fon selamat web yang diperkenalkan oleh Google untuk pembangun, anda boleh Muat turun adalah percuma. Dalam artikel ini kita akan membincangkan fon selamat web dan fon sandaran

Fon yang disediakan oleh CSS tersedia untuk digunakan oleh pembangun.

Apakah fon selamat web?

Fon selamat web ialah fon yang disokong oleh semua penyemak imbas pada mana-mana peranti ini membolehkan pembangun memaparkannya dengan betul walaupun ia tidak dipasang dalam peranti pengguna Sebelum fon selamat web dibangunkan, penyemak imbas akan memaparkan fon generik seperti

Times New Roman

jika fon tidak dipasang pada sistem setempat pengguna. Walau bagaimanapun, pembangun tidak dapat mengesan sama ada fon dipaparkan dengan betul pada bahagian pelayan. Ini mengakibatkan pengalaman pengguna yang buruk. Menggunakan fon selamat web menyelesaikan masalah ini semasa mereka bentuk web, jika anda menggunakan fon selamat web, anda boleh yakin bahawa fon anda akan dipaparkan seperti yang terdapat dalam setiap peranti

Tatabahasa

element{
   font-family: font1;
}

Salin selepas log masuk

Jenis fon selamat web

Terdapat enam fon selamat web. Mereka adalah seperti berikut −

Serif
- Fon ini mengandungi tonjolan kecil yang terdapat pada badan setiap huruf Ia lebih mudah dibaca pada skrin dan bentuk bercetak Times New Roman ialah fon serif
Monospace
- Fon ini ialah fon dengan jarak yang sama antara huruf. Space Mono, Courier, Inconsolata, dll. semuanya adalah fon lebar tetap.

Fon Sans serif
- Fon ini adalah bertentangan dengan fon serif. Mereka tidak mengandungi tonjolan kecil. Arial, Helvetica, Futura, Calibri, dsb. ialah beberapa contoh fon sans serif.

Fantasi
- Fon ini sangat bergaya dan hiasan. Papirus, Herculanum, Luminari ialah fon fantasi.

MS
- Ini adalah fon yang diperkenalkan oleh Microsoft Trebuchet MS, MS Gothic, Georgia dll., ialah fon MS.

Kursif

- Fon ini serupa dengan tulisan tangan kursif. Skrip Berus MT, Broadley, Monarda, Raksana, dll. ialah beberapa fon kursif.

Contoh

<!DOCTYPE html>
<html>
<head>
   <meta charset= "UTF-8">
   <title> Web Safe Fonts </title>
   <link rel= "preconnect" href= "https://fonts.googleapis.com">
   <link rel= "preconnect" href= "https://fonts.gstatic.com">
   <link href= "https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel= "stylesheet">
   <style>
      h1{
         color: green;
         text-decoration: underline;
      }
      .demo1{
         font-family: Times New Roman;
      }
      .demo2{
         font-family: Arial;
      }
      .demo3{
         font-family: Courier;
      }
      .demo4{
         font-family: Brush Script MT;
      }
      .demo5{
         font-family: Trebuchet MS;
      }
      .demo6{
         font-family: fantasy;
      }
   </style>
</head>
<body>
   <center>
      <h2> Web Safe Fonts </h2>
      <div class= "demo1"> This is an example in Times New Roman font. </div>
      <div class= "demo2"> This is an example in Arial font. </div>
      <div class= "demo3"> This is an example in Courier font. </div>
      <div class= "demo4"> This is an example in Brush Script MT font. </div>
      <div class= "demo5"> This is an example in Trebuchet MS font. </div>
      <div class= "demo6"> This is an example in Fantasy font. </div>
   </center>
</body>
</html>

Salin selepas log masuk

Apakah fon sandaran dalam CSS?

CSS menawarkan dua jenis keluarga fon untuk mereka bentuk web Ini adalah keluarga fon generik seperti serif (Times New Roman, Georgia, dll.,) dan keluarga fon individu seperti Arial, Calibri dll.

Keluarga fon universal mempunyai beberapa fon yang kelihatan serupa, jadi jika tiada fon utama tersedia pada sistem pengguna, terdapat mekanisme

sandaran

yang mengandungi senarai keluarga fon serupa yang boleh digunakan sebaliknya. Fon ini dipanggil fon ganti. Ia digunakan sebagai sandaran dalam reka bentuk web kerana tiada fon web yang 100% selamat. Selalu ada kemungkinan kesilapan.

BackupFon menyelesaikan masalah ini dengan bertindak sebagai sandaran. Keluarga fon yang merupakan fon selamat web juga boleh ditetapkan sebagai fon sandaran. Beberapa contoh fon ganti

termasuk

kursif, fantasi, monospace dan banyak lagi Tatabahasa

element{
   font-family: font1, font2, font3, font4;
}

Salin selepas log masuk

Font2, font3, font4

ialah fon sandaran yang digunakan sebagai sandaran Jika penyemak imbas tidak menyokong font1, maka font2 akan dipaparkan jika bukan font2, maka font3 digunakan dan seterusnya

Contoh

<!DOCTYPE html>
<html>
<head>
   <title> Fallback fonts </title>
   <link rel= "preconnect" href= "https://fonts.googleapis.com">
   <link rel= "preconnect" href= "https://fonts.gstatic.com">
   <link href= "https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel= "stylesheet">
   <style>
      .demo1{
         font-family: verdana,'cursive';
      }
      .demo2{
         font-family: cursive, Cochin, Georgia;
      }
      .demo3{
         font-family: Helvetica, arial, cursive, 'Times New Roman';
      }
      .demo4{
         font-family: 'Times New Roman', Cambria, Cochin, Georgia, Times, serif;
      }
   </style>
</head>
<body>
   <center>
      <h2> Fallback fonts </h2>
      <p class= "demo1"> This is an example. </p>
      <p class= "demo2"> This is an example. </p>
      <p class= "demo3"> This is an example. </p>
      <p class= "demo4"> This is an example. </p>
   </center>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, keluarga fon teks ialah fon1. Jika mana-mana penyemak imbas tidak menyokong keluarga fon font1 maka kami mempunyai senarai keluarga fon di sebelahnya yang boleh digunakan sebagai fon sandaran. Kesimpulan

Menggunakan fon selamat web dalam reka bentuk web ialah amalan yang baik kerana ia memastikan pembangun bahawa ia akan dipaparkan pada peranti pengguna. Walau bagaimanapun, fon selamat web tidak boleh dipercayai 100%. Oleh itu, fon sandaran CSS boleh digunakan sebagai sandaran untuk fon supaya jika satu keluarga fon tidak berfungsi, penyemak imbas boleh mencuba keluarga fon tersenarai lain. Amalan pengekodan yang baik adalah menggunakan keluarga fon biasa sebagai fon pertama dan kemudian menggunakan keluarga fon yang sama untuk pilihan lain.

Atas ialah kandungan terperinci Apakah fon selamat web dan fon sandaran dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!