Rumah >hujung hadapan web >tutorial css >Bagaimana untuk menggunakan sifat saiz fon-optik dalam CSS?
Bagaimana untuk menggunakan sifat saiz fon-optik dalam CSS?
- PHPzke hadapan
- 2023-08-27 20:49:021536semak imbas
Sebelum mempelajari cara menggunakan sifat fon-optical-sizing, pertama sekali kita perlu melihat sifat fon dalam CSS dan mengapa anda perlu menggunakan font- saiz optik sebagai sifat yang berasingan.
Gaya teks pada halaman web dikawal oleh harta fon dalam CSS, yang merupakan singkatan untuk banyak sifat lain. Ia boleh digunakan untuk menggunakan fon sistem pada elemen, atau untuk menetapkan nilai yang berbeza untuk sifat CSS yang lain.
Atribut fon
Sifat ini terpakai kepada semua elemen dan sifatnya boleh diwarisi, bermakna fon elemen anak akan sama dengan fon elemen induk melainkan dinyatakan sebaliknya.
Atribut yang membentuk atribut trengkas fon adalah seperti berikut -
Font-family - Ia menentukan keluarga fon yang akan digunakan pada teks, anda boleh memilih untuk menyediakan senarai keluarga dengan keutamaan dari kiri ke kanan.
Saiz Fon − Digunakan untuk mengawal saiz fon atau teks.
Font stretch − Anda boleh menggunakan sifat ini untuk menetapkan wajah watak yang boleh menjadi lebih sempit atau lebih lebar daripada aksara biasa .
Gaya fon − Sifat ini menentukan sama ada fon harus dipaparkan dalam teks tebal, condong, garis bawah atau coretan #🎜🎜 # 🎜🎜#
Font-variant - Kawal varian fon dan tetapkan nilai berbeza untuk ligatur.
Font-weight - Sifat ini menetapkan keberanian paparan teks.
-
Ketinggian garisan- Digunakan untuk menetapkan jarak antara baris teks.
Semua sifat ini, sama ada digunakan sebagai sebahagian daripada sifat trengkas fon atau sendiri, mempunyai nilai awal. Bagi kebanyakan, nilai awal ialah "Biasa", nilai lalai untuk saiz fon ialah "Sederhana", dan nilai lalai untuk keluarga fon bergantung pada sistem pengguna.
Contoh
Berikut ialah contoh penggunaan atribut fon untuk menggayakan teks.
<!DOCTYPE html> <html lang="en"> <head> <title>Various font styles</title> </head> <body> <p style="font:caption">This text will be displayed as a caption.</p> <p style="font:icon">This text will be displayed as an icon.</p> <p style="font:menu">This text will be displayed as a menu.</p> <p style="font:message-box">This text will be displayed as message-box</p> <p style="font:small-caption">This text will be displayed as a smaller form of caption.</p> <p style="font:status-bar">This text will be displayed as status bar.</p> <p style="font: bold;">This will be bold</p> <p style="font-size: large;">This will have larger font size.</p> </body> </html>
Apakah saiz optik fon?
CSS mempunyai sifat
font-optical-sizingyang menentukan sama ada teks yang dijana dioptimumkan untuk pelbagai saiz skrin. Penyemak imbas boleh menukar garis besar glyph fon untuk menjadikannya lebih mudah dibaca pada pelbagai saiz. Adalah satu kelebihan besar bagi kami jika fon menyokong saiz semula optik fon. Dengan cara ini kami memastikan bahawa teks sentiasa menyesuaikan diri dengan skrin yang digunakan pengguna. Kebanyakan keluarga fon berubah menyokong sifat ini. Saiz semula optik didayakan secara automatik apabila fon mempunyai paksi saiz semula optik. Kami menggunakan nilai opsz dalam tetapan varian fon untuk mewakili paksi perubahan saiz optik.
Apabila menggunakan penskalaan optik, saiz fon yang lebih kecil biasanya akan muncul dengan sapuan yang lebih tebal dan serif yang lebih besar, manakala teks yang lebih besar lazimnya akan muncul dengan sapuan yang lebih halus, lebih tebal dan lebih nipis.
Apabila menyatakan sifat ini, nilai berikut boleh digunakan -
- None
− Kami menggunakan nilai ini apabila kami tidak memerlukan teks yang diubah suai secara optik.
- auto
- Pelayar akan menggunakan nilai ini apabila kita perlu melaraskan bentuk glif mengikut saiz skrin.
Selain itu, kita juga boleh menggunakan nilai global (warisan, awal dan tidak ditetapkan) sebagai nilai atribut ini.
Secara lalai, nilai awal sifat ini ialah auto. Ia digunakan untuk semua elemen dan juga termasuk atribut ::huruf pertama dan ::first-line. Ia adalah nilai yang boleh diwarisi dan nilai yang ditentukan oleh penyemak imbas digunakan sebagai nilai yang dikira. Ia mempunyai jenis animasi diskret.
Contoh
Contoh penggunaan nilai auto sebagai nilai atribut ini ditunjukkan di bawah.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
padding: 3%;
font-weight: 700;
font-optical-sizing: auto;
}
</style>
</head>
<body>
<p>This text will be optically modified for all screen sizes.</p>
</body>
</html>
Contoh
Contoh ini menggunakan warisan sebagai nilai harta, yang merupakan salah satu daripada tiga sifat global yang boleh kita gunakan dalam CSS.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
padding: 3%;
font-weight: 700;
font-optical-sizing: inherit;
}
</style>
</head>
<body>
<p>This text will be optically modified for all screen sizes using inherit as its value.</p>
</body>
</html>
KESIMPULAN
Secara keseluruhannya, sifat saiz fon-optik dalam CSS ialah cara terbaik untuk menjadikan teks kelihatan lebih baik pada peranti dan peleraian yang berbeza. Ia membolehkan anda melaraskan saiz fon mengikut penggunaan yang dimaksudkan, yang membantu meningkatkan kebolehbacaan dan mencipta reka bentuk yang lebih konsisten merentas skrin yang berbeza. Dengan memanfaatkan ciri ini, pereka bentuk boleh memastikan reka letak mereka kelihatan hebat tidak kira pada peranti yang mereka lihat, tanpa perlu melaraskan tetapan secara manual untuk setiap saiz skrin.
Atas ialah kandungan terperinci Bagaimana untuk menggunakan sifat saiz fon-optik dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!