Untuk melumpuhkan satu kemunculan ligatur dalam label web, bungkus hurufnya dalam span sebaris dan lumpuhkan ciri ligatur yang berkaitan di situ. Teks lain mengekalkan tetapannya. CSS tidak mempunyai suis umum untuk melumpuhkan satu ligatur bernama dalam seluruh fon. Kawalan ligatur MDN mentakrifkan kategori ciri, bukannya penggantian individu.

Panduan ini ditujukan kepada pengguna Mac yang mengedit HTML dan CSS halaman web. Tugas khususnya ialah memisahkan fi yang pertama dalam label sintetik fine flake office fine, sambil membenarkan teks selebihnya mengekalkan ligaturnya. Ujian kecil setempat menunjukkan perbezaan antara mengubah satu kemunculan dengan mengubah seluruh ciri.

Apakah yang boleh dilumpuhkan secara terpilih dengan CSS?

Satu ciri ligatur boleh mengandungi berbilang penggantian. Melumpuhkan liga bermaksud melumpuhkan ciri itu untuk teks yang terjejas; ini tidak bermaksud memilih satu pasangan huruf tertentu. Begitu juga, font-variant-ligatures: no-common-ligatures mengawal ligatur lazim melalui liga dan clig. Penggantian sebenar bergantung pada fon. MDN: font-variant-ligatures

Perbezaan yang berguna ialah antara tempat tetapan digunakan dengan ciri fon yang dikawalnya. Anda boleh mengehadkan tetapan kepada dua huruf dengan penanda, walaupun ciri itu sendiri mengandungi banyak ligatur. Ini memberikan penyelesaian pada peringkat kemunculan tanpa memerlukan suis pengecualian seluruh fon.

Hasil yang diingini Pendekatan yang sesuai Syarat
Memisahkan satu kemunculan fi Bungkus kemunculan itu dan lumpuhkan cirinya secara setempat Anda boleh mengedit penanda
Menghapuskan ligatur diskresioner tetapi mengekalkan ligatur lazim Gunakan no-discretionary-ligatures pada elemen yang dimaksudkan Penggantian yang tidak diingini tergolong dalam dlig
Menghapuskan setiap fi sambil mengekalkan semua ligatur lazim yang lain Gunakan ciri khusus fon yang didokumenkan, jika tersedia Fon itu mesti menyediakan kawalan yang diperlukan
Mengubah satu kemunculan dalam aplikasi yang tidak dapat anda edit Cari pemformatan peringkat aksara yang didokumenkan untuk aplikasi itu CSS web tidak menentukan sokongan aplikasi desktop

Utamakan font-variant-ligatures untuk kategori yang disokongnya. MDN mengesyorkan sifat fon peringkat lebih tinggi apabila tersedia; font-feature-settings memberikan akses kepada ciri OpenType peringkat lebih rendah bagi kes lain. Menulis font-feature-settings: \"liga\" off tidak menambah kawalan khusus pasangan. MDN: font-feature-settings

Buat perbandingan setempat pada Mac anda

Mulakan dengan fail kendiri supaya anda boleh membandingkan hasil tanpa gaya halaman yang tidak berkaitan. Dalam TextEdit, pilih File > New, kemudian Format > Make Plain Text. Masukkan contoh lengkap di bawah, simpan sebagai ligature-demo.html, dan pilih Use .html jika diminta. Ini ialah langkah yang didokumenkan oleh Apple untuk mencipta fail HTML dalam TextEdit. Apple: Bekerja dengan dokumen HTML dalam TextEdit pada Mac

Buka fail yang disimpan dalam pelayar anda. Contoh ini menggunakan fon yang tersedia secara setempat dan tidak memerlukan pustaka atau muat turun. Senarai fonnya sekadar ilustrasi: perbezaan yang kelihatan memerlukan fon terpilih mengandungi ligatur berkaitan. Paparan pelayar ialah ujiannya; tiada rupa glif tertentu yang dianggap pasti.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ligature comparison</title>
  <style>
    body {
      margin: 2rem;
      color: #222;
      background: #fff;
      font-family: system-ui, sans-serif;
    }

    main {
      max-width: 42rem;
    }

    .sample {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 2.5rem;
      line-height: 1.5;
      letter-spacing: normal;
      font-variant-ligatures: common-ligatures;
    }

    .separate-pair,
    .all-common-off {
      font-variant-ligatures: no-common-ligatures;
    }
  </style>
</head>
<body>
  <main>
    <h2>Baseline</h2>
    <p class="sample">fine flake office fine</p>

    <h2>First pair separated</h2>
    <p class="sample"><span class="separate-pair">fi</span>ne flake office fine</p>

    <h2>All common ligatures disabled</h2>
    <p class="sample all-common-off">fine flake office fine</p>
  </main>
</body>
</html>

Dalam baris tengah, span itu mengandungi kedua-dua huruf fi yang disasarkan. Selebihnya baris itu mewarisi tetapan ligatur lazim. Span sesuai untuk pengelompokan yang semata-mata bersifat gaya ini: WHATWG mentakrifkannya sebagai elemen yang mewakili anak-anaknya tanpa menambah makna tersendiri. WHATWG: Elemen span

Baca perbandingan ini dalam tiga langkah:

  1. Bandingkan fine pertama dalam baris asas dan baris tengah. Perhatikan bentuk huruf, bukan sekadar lebar keseluruhan.
  2. Bandingkan flake, office dan fine terakhir antara kedua-dua baris itu. Semuanya berada di luar pengecualian dan sepatutnya mengekalkan tetapan ciri asalnya.
  3. Bandingkan baris bawah dengan baris lain. Ini ialah kawalan yang lebih luas: ligatur lazim dilumpuhkan di seluruh baris itu.

Jika ketiga-tiga baris kelihatan sama, perbandingan itu tidak memberikan kesimpulan. Tukar fon contoh kepada fon yang sebenarnya ingin anda gunakan, dan pilih jujukan huruf yang ligaturnya didokumenkan untuk fon itu. Pengisytiharan CSS tidak dapat menunjukkan penggantian yang tidak disediakan oleh fon terpilih.

Gunakan pengecualian tanpa mengganggu aliran teks

Bagi label pendek, letakkan span tepat di sekeliling keseluruhan jujukan yang ingin dipisahkan. Pastikan aksara sebelum dan selepasnya bersebelahan dalam sumber, seperti contoh yang menggunakan fi dan ne. Jangan sisipkan ruang atau baris baharu di dalam perkataan semata-mata untuk memudahkan pembacaan penanda.

Span itu memerlukan perubahan tetapan ciri. Meletakkan satu huruf sahaja dalam span tanpa gaya bukan cara yang boleh diharapkan untuk memecahkan ligatur: spesifikasi teks W3C menghendaki pembentukan aksara diteruskan merentasi sempadan sebaris apabila tiada perubahan pemformatan yang berkesan. Spesifikasi itu juga mentakrifkan keadaan apabila jidar, sempadan, pelapik atau pemformatan lain memutuskan pembentukan aksara. W3C: Pembentukan Aksara Merentasi Sempadan Elemen

Kekalkan pengecualian ini sebagai span sebaris biasa. Menambah inline-block, jarak atau pembalut susun atur memperkenalkan keputusan susun atur tambahan yang tidak diperlukan untuk tugas ini. Selepas menggunakan tetapan tipografi, kecilkan tetingkap pelayar dan periksa label dalam bekas yang dimaksudkan. Semak sama ada pembalutan baris berubah, kerana pilihan glif yang berbeza boleh mengubah ruang yang digunakan oleh teks.

Bagi jujukan yang lebih panjang, tentukan sempadan yang dimaksudkan dengan jelas. Jika penggantian yang tidak diingini melibatkan ffi, membungkus fi sahaja turut mewujudkan sempadan pemformatan di dalam jujukan yang lebih besar. Uji seluruh perkataan dan huruf yang bersebelahan, bukannya menganggap setiap penggantian bertindih akan berfungsi secara berasingan.

Apabila menyesuaikan contoh ini kepada halaman sedia ada, edit label yang berkaitan dalam sumber atau komponennya. Elakkan membina semula seluruh perenggan daripada teks yang kelihatan semata-mata untuk menambah satu pengecualian; kekalkan pautan, penekanan dan struktur elemennya yang sedia ada. Contoh ini sengaja mengendalikan satu kemunculan yang diketahui, bukannya cuba menggantikan secara automatik di seluruh halaman sembarangan.

Bagaimana jika ligatur itu masih ada—atau ligatur lain hilang?

Gunakan perbandingan itu sebagai urutan diagnostik sebelum menambah lebih banyak penggantian.

Mula-mula, semak kategori ciri. Contoh ini menyasarkan ligatur lazim. Jika fon mendokumenkan penggantian yang tidak diingini di bawah dlig, gunakan no-discretionary-ligatures pada pengecualian itu. Penggantian kontekstual mungkin melibatkan calt, yang dikawal oleh no-contextual; tetapan itu boleh menjejaskan bentuk kontekstual lain dalam teks terpilih. Takrif kategori ciri MDN

Seterusnya, semak tetapan yang bersaing. Pengisytiharan font-feature-settings yang sedia ada boleh mengatasi pilihan ciri yang tersirat dalam font-variant-ligatures. W3C menyatakan bahawa tetapan ciri peringkat rendah digunakan kemudian semasa penyelesaian ciri. Semak pengisytiharan itu sebelum membuat kesimpulan bahawa pendekatan span tidak disokong. W3C: Penyelesaian Ciri dan Variasi Fon

Kemudian, semak skopnya. Jika ligatur dalam perkataan lain hilang, pastikan kelas pengecualian hanya dilekatkan pada span yang disasarkan. Tetapan yang digunakan pada perenggan atau bekasnya meliputi julat teks yang jauh lebih besar. Dalam contoh setempat, baris bawah sengaja menunjukkan hasil yang lebih luas itu.

Akhir sekali, bezakan tipografi pilihan daripada pembentukan aksara yang diperlukan. font-variant-ligatures: none lebih luas daripada yang diperlukan untuk tugas ini, dan ligatur wajib tidak termasuk dalam kawalan pelumpuhannya. W3C secara jelas mengekalkan ligatur wajib di bawah sifat itu. W3C: Ligatur

Jika matlamatnya ialah menghapuskan satu jenis ligatur di seluruh teks, teknik span setempat perlu digunakan pada setiap kemunculan yang dimaksudkan. Ciri khusus fon mungkin menawarkan penyelesaian yang lebih kemas, tetapi tag dan kesannya mesti dirujuk daripada dokumentasi fon itu. Jangan anggap nombor set gaya mempunyai makna yang sama dalam fon yang berlainan.

Adakah pustaka pembentukan aksara menyediakan kawalan yang lebih halus?

HarfBuzz mendedahkan julat ciri melalui hb_feature_t: sesuatu ciri mempunyai tag, nilai, titik mula inklusif dan titik akhir eksklusif, yang dinyatakan melalui nilai kluster. Ini membolehkan aplikasi yang memanggil pustaka pembentukan aksara menggunakan tetapan ciri pada julat terhad. Julat itu tetap merupakan julat bagi sesuatu ciri, bukannya pemilih sejagat untuk satu ligatur bernama. HarfBuzz: hb_feature_t

API itu berada pada lapisan yang berbeza daripada CSS halaman biasa. Mekanisme yang didokumenkan oleh HarfBuzz menghantar permintaan ciri kepada hb_shape(). Contohnya menerangkan penimbal pembentukan aksara dan peraturan carian fon, bukannya menambah pilihan helaian gaya pelayar. Untuk tugas label web pada Mac ini, memperkenalkan aliran pembentukan aksara tersuai akan menambah kerja yang melebihi pengecualian sebaris. HarfBuzz: Ciri OpenType

Akhiri dengan memeriksa pasangan yang disasarkan, ligatur di sekelilingnya dan label pada lebar paparan sebenar. Kekalkan pengecualian paling ringkas yang berfungsi: keseluruhan jujukan yang tidak diingini di dalam satu span, ciri yang sesuai dilumpuhkan di situ, dan teks selebihnya mengekalkan tetapan yang dimaksudkan.

Sumber