Bagaimana untuk menggunakan sifat saiz fon-optik dalam CSS?-tutorial css-php.cn

Bagaimana untuk menggunakan sifat saiz fon-optik dalam CSS?

PHPz

Lepaskan： 2023-08-27 20:49:02

ke hadapan

1541 orang telah melayarinya

如何在 CSS 中使用 font-optical-sizing 属性？

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.

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>

Salin selepas log masuk

Apakah saiz optik fon?

CSS mempunyai sifat

font-optical-sizing

yang 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.

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!