hujung hadapan webtutorial cssBagaimana 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;
}
Terjemahan bahasa Cina bagi 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');
Terjemahan bahasa Cina bagi 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!
Begitu banyak pautan warnaApr 13, 2025 am 11:36 AMDi sana ' s telah menjalankan alat, artikel, dan sumber tentang warna akhir -akhir ini. Tolong izinkan saya menutup beberapa tab dengan membulatkannya di sini untuk keseronokan anda.
Bagaimana margin automatik berfungsi di flexboxApr 13, 2025 am 11:35 AMRobin telah menutupi ini sebelum ini, tetapi saya telah mendengar kekeliruan mengenainya dalam beberapa minggu yang lalu dan melihat orang lain menikam menerangkannya, dan saya mahu
Melangkah Rainbow Garis bawahApr 13, 2025 am 11:27 AMSaya sangat suka reka bentuk tapak sandwic. Di antara banyak ciri yang indah ialah tajuk utama ini dengan garis bawah Rainbow yang bergerak ketika anda menatal. Ia ' s tidak
Tahun Baru, pekerjaan baru? Let ' s membuat resume berkuasa grid!Apr 13, 2025 am 11:26 AMBanyak reka bentuk resume yang popular membuat sebahagian besar ruang halaman yang tersedia dengan meletakkan bahagian dalam bentuk grid. Mari kita gunakan grid CSS untuk membuat susun atur yang
Salah satu cara untuk memecahkan pengguna dari kebiasaan tambah nilai terlalu banyakApr 13, 2025 am 11:25 AMTambah nilai halaman adalah satu perkara. Kadang -kadang kita menyegarkan halaman apabila kita fikir ia tidak bertindak balas, atau percaya bahawa kandungan baru tersedia. Kadang -kadang kita hanya marah
Reka bentuk yang didorong oleh domain dengan ReactApr 13, 2025 am 11:22 AMTerdapat panduan yang sangat sedikit tentang cara mengatur aplikasi front-end di dunia React. (Hanya gerakkan fail sehingga ia "terasa betul," lol). Kebenaran
Mengesan pengguna yang tidak aktifApr 13, 2025 am 11:08 AMKebanyakan masa anda tidak benar -benar peduli sama ada pengguna secara aktif terlibat atau tidak aktif sementara pada aplikasi anda. Tidak aktif, makna, mungkin mereka
Wufoo ZapierApr 13, 2025 am 11:02 AMWufoo sentiasa hebat dengan integrasi. Mereka mempunyai integrasi dengan aplikasi tertentu, seperti Monitor Kempen, MailChimp, dan TypeKit, tetapi mereka juga
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
Penyesuai Pelayan SAP NetWeaver untuk Eclipse
Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.
DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini
SublimeText3 versi Inggeris
Disyorkan: Versi Win, menyokong gesaan kod!
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular
