fon set html5

HTML5, sebagai salah satu standard web yang paling biasa digunakan sekarang, menyediakan banyak fungsi praktikal, termasuk tetapan fon. Dalam HTML5, terdapat banyak cara untuk menetapkan fon, beberapa daripadanya diperkenalkan di bawah.

1. Tetapkan fon dalam helaian gaya CSS

Gunakan helaian gaya CSS untuk menambah tetapan fon pada keseluruhan halaman web atau elemen individu. Kod untuk melaksanakan fungsi ini adalah seperti berikut:

/*为整个网页设置字体*/
body {
  font-family: Arial, sans-serif;
}

/*为单个元素设置字体*/
h1 {
  font-family: Georgia, serif;
}

Kod di atas melaksanakan tetapan fon melalui atribut font-family. Sifat ini diikuti dengan senarai nama keluarga fon, dan berbilang fon boleh ditentukan mengikut keutamaan. Jika fon pertama tidak wujud, fon kedua digunakan secara automatik, dan seterusnya. Dalam contoh di atas, jika pengguna tidak mempunyai fon Arial, fon sans-serif lalai akan digunakan. Begitu juga, jika fon Georgia tidak ada, fon serif lalai akan digunakan.

2. Tetapkan fon dalam teg HTML

Teg HTML juga boleh menetapkan fon secara langsung, tetapi kaedah ini biasanya tidak disyorkan. Ini kerana dalam pembangunan web sebenar, secara amnya adalah perlu untuk memisahkan kandungan dan gaya, dan menggunakan helaian gaya CSS untuk mencapai pengurusan gaya yang bersatu dan meningkatkan kebolehselenggaraan kod. Berikut ialah contoh kod untuk menetapkan fon dalam teg HTML:

<h1 style="font-family: Arial, sans-serif;">这是标题</h1>
<p style="font-family: Georgia, serif;">这是段落</p>

Seperti yang anda lihat, dalam kod di atas, atribut style digunakan untuk menetapkan fon. Seperti dalam helaian gaya CSS, atribut font-family juga digunakan untuk menetapkan fon. Walau bagaimanapun, perlu diingatkan bahawa jika anda perlu menggunakan gaya yang sama pada berbilang elemen, kaedah ini memerlukan pengubahsuaian atribut style setiap elemen, yang merupakan beban kerja yang besar dan menyusahkan untuk dikekalkan.

3. Gunakan Google Font

Google Fonts ialah perpustakaan fon dalam talian yang menyediakan perkhidmatan muat turun fon percuma. Tetapan fon boleh digunakan pada keseluruhan halaman web atau pada elemen tertentu dengan merujuk fail CSS yang disediakan oleh Google Font. Berikut ialah contoh kod menggunakan Google Font:

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style>
body {
  font-family: 'Open Sans', sans-serif;
}
</style>

Kod di atas menggunakan fon Open Sans ke seluruh halaman web dengan merujuk fail CSS yang disediakan oleh Google Fonts. Gunakan nama fon font-family dalam atribut 'Open Sans' untuk melengkapkan tetapan fon.

4. Gunakan fon web

Juga untuk meningkatkan keserasian dan kesan visual halaman web, fon web juga boleh digunakan pada HTML5. Sebelum menggunakan fon web, anda perlu memuat naik fail fon ke pelayan dan merujuknya dalam fail CSS. Berikut ialah contoh kod untuk menggunakan fon web:

@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/mycustomfont.ttf') format('truetype');
}
body {
  font-family: 'MyCustomFont', sans-serif;
}

Dalam blok peraturan @font-face, fon tersuai bernama MyCustomFont diisytiharkan. Laluan dan format fail fail fon boleh ditentukan melalui atribut src. Dalam teg body, anda boleh menetapkan fon mengikut nama fon tersuai.

Di atas ialah beberapa cara untuk menetapkan fon dalam HTML5. Dalam pembangunan web sebenar, anda boleh memilih kaedah yang berbeza secara fleksibel dan menetapkan fon mengikut keperluan tertentu.

Atas ialah kandungan terperinci fon set html5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!