hujung hadapan web
tutorial css
Bagaimana untuk menambah beberapa fon bukan standard ke tapak web dalam CSS?
Bagaimana untuk menambah beberapa fon bukan standard ke tapak web dalam CSS?
Fon bukan standard merujuk kepada mana-mana fon dalam CSS yang bukan sebahagian daripada set lalai fon yang tersedia dalam kebanyakan penyemak imbas. Fon lalai termasuk Arial, Times New Roman dan Verdana, yang merupakan fon standard kerana ia diprapasang pada kebanyakan komputer dan peranti.
Fon bukan standard ialah fon yang tidak diprapasang dan mesti dimuatkan secara khusus ke dalam tapak web sebelum ia boleh digunakan. Fon ini boleh didapati daripada laman web seperti Google, Adobe atau MyFonts. Mereka juga boleh direka khas atau dibeli.
Menggunakan fon bukan standard boleh membantu menambah sentuhan unik dan peribadi pada reka bentuk tapak web anda. Ia sering digunakan untuk mencipta rupa khusus atau mewujudkan identiti visual jenama.
Tambahkan beberapa fon bukan standard pada tapak web dalam CSS
Tipografi memainkan peranan penting semasa mereka bentuk laman web. Fon lalai yang disediakan dalam CSS, seperti Arial, Times New Roman dan Verdana, semasa tersedia secara berfungsi, selalunya kelihatan hambar dan generik.
Peraturan @font-face membenarkan menentukan fail dan sifat fon supaya fon boleh digunakan pada elemen tertentu pada halaman.
Sintaks
Sintaks untuk menggunakan peraturan @font-face adalah seperti berikut -
@font-face {
font-family: 'MyFont';
src: url('path/to/MyFont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}Dalam contoh ini, kami menentukan keluarga fon sebagai 'MyFont', iaitu nama yang akan digunakan untuk merujuk fon ini sepanjang CSS. Atribut 'src' menentukan lokasi fail fon, dan atribut 'format' menentukan format fail fon. Untuk keserasian penyemak imbas yang lebih baik, adalah disyorkan untuk memasukkan berbilang format fon, seperti truetype, woff, woff2, eot, dsb.
Setelah fon ditakrifkan menggunakan peraturan @font-face, ia boleh digunakan pada elemen tertentu pada halaman menggunakan atribut 'font-family'. Dalam contoh di bawah, kami menggunakan fon tersuai 'MyFont' pada elemen 'body' −
body {
font-family: 'MyFont', Fallback, sans-serif;
}
Contoh
ialah:Contoh
<html>
<head>
<style>
body {
background-color:pink;
}
@font-face {
font-family: 'MyFont';
src: url('/css/font/SansationLight.woff')
format('truetype');
font-weight: normal;
font-style: normal;
}
p {
font-family: 'MyFont', Fallback, sans-serif;
}
.div {
font-family: 'MyFont', Arial, sans-serif;
}
</Style>
</head>
<body>
<div class="div">This is the example of font face with CSS3.</div>
<p><b>Original Text :</b>This is the example of font face with CSS.</p>
</body>
</html>
Kami juga boleh menggunakan @import untuk mengimport fon daripada sumber jauh seperti Google Fonts atau mana-mana perkhidmatan pengehosan fon lain.
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap');
Contoh
ialah:Contoh
<!DOCTYPE html>
<html>
<title>Google fonts example</title>
<head>
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet"/>
<style>
body {
font-family: "Permanent Marker";
font-size: 15px;
}
</style>
</head>
<body>
<h1 id="Google-fonts-example">Google fonts example</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis non a quos repudiandae doloribus cumque! Ex rem rerum aut maiore. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis non a quos repudiandae doloribus cumque! Ex rem rerum aut maiores</p>
</body>
</html>
Kesimpulan
Dengan langkah di atas, kami telah berjaya menambah fon bukan standard ke tapak web. Ingat, adalah penting untuk memastikan bahawa fail fon dihoskan pada pelayan dan boleh diakses oleh penyemak imbas agar fon dapat dipaparkan dengan betul.
Atas ialah kandungan terperinci Bagaimana untuk menambah beberapa fon bukan standard ke tapak web dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Menjadikan Peralihan Svelte Khas pertama anda
Mar 15, 2025 am 11:08 AM
API Peralihan Svelte menyediakan cara untuk menghidupkan komponen apabila mereka memasuki atau meninggalkan dokumen, termasuk peralihan svelte adat.
Bekerja dengan Caching Graphql
Mar 19, 2025 am 09:36 AM
Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Tunjukkan, jangan beritahu
Mar 16, 2025 am 11:49 AM
Berapa banyak masa yang anda habiskan untuk merancang persembahan kandungan untuk laman web anda? Semasa anda menulis catatan blog baru atau membuat halaman baru, adakah anda memikirkan
Bagaimana anda menggunakan CSS untuk membuat kesan teks, seperti bayang -bayang teks dan kecerunan?
Mar 14, 2025 am 11:10 AM
Artikel ini membincangkan menggunakan CSS untuk kesan teks seperti bayang -bayang dan kecerunan, mengoptimumkannya untuk prestasi, dan meningkatkan pengalaman pengguna. Ia juga menyenaraikan sumber untuk pemula. (159 aksara)
Membuat Bragdoc anda sendiri dengan sebelas
Mar 18, 2025 am 11:23 AM
Tidak kira tahap tahap anda sebagai pemaju, tugas yang kami selesaikan -sama ada besar atau kecil -membuat kesan besar dalam pertumbuhan peribadi dan profesional kami.
Apa yang ada perintah npm?
Mar 15, 2025 am 11:36 AM
Perintah NPM menjalankan pelbagai tugas untuk anda, sama ada sebagai satu-satunya atau proses berjalan terus untuk perkara seperti memulakan pelayan atau menyusun kod.
