Pertanyaan Bagaimana cara menanamkan font dalam HTML?


Saya mencoba mencari solusi yang layak (terutama dari sisi SEO) untuk menyematkan font di halaman web. Sejauh ini saya telah melihat solusi W3C, yang bahkan tidak berfungsi pada Firefox, dan solusi keren ini. Solusi kedua adalah untuk judul saja. Apakah ada solusi yang tersedia untuk teks lengkap? Saya bosan dengan font standar untuk halaman web.

Terima kasih!


75
2017-10-20 22:57


asal


Jawaban:


Banyak hal telah berubah karena pertanyaan ini awalnya ditanyakan dan dijawab. Sudah ada sejumlah besar pekerjaan yang dilakukan untuk mendapatkan font lintas-browser yang disematkan untuk teks isi agar berfungsi menggunakan penyisipan @ font-face.

Paul Irlandia disatukan Sintaks antipeluru @ font-face menggabungkan upaya dari beberapa orang lain. Jika Anda benar-benar membaca seluruh artikel (bukan hanya bagian atas), ini memungkinkan satu pernyataan @ font-face untuk mencakup IE, Firefox, Safari, Opera, Chrome, dan mungkin lainnya. Pada dasarnya ini dapat memberi makan OTF, EOT, SVG dan WOFF dengan cara yang tidak merusak apa pun.

Dilepaskan dari artikelnya:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

Bekerja dari basis itu, Font Squirrel mengumpulkan berbagai alat yang berguna termasuk @ Generator font-face yang memungkinkan Anda mengunggah file TTF atau OTF dan mendapatkan file font yang dikonversi secara otomatis untuk jenis lainnya, bersama dengan CSS yang dibuat sebelumnya dan halaman HTML demo. Font Squirrel juga punya Ratusan kit @ font-face.

Soma Design juga mengumpulkan Bookmarklet FontFriend, yang mengubah font pada halaman dengan cepat sehingga Anda dapat mencoba hal-hal. Ini termasuk dukungan font-face @ drag-and-drop di FireFox 3.6+.

Baru-baru ini, Google telah mulai menyediakan Google Web Fonts, berbagai macam font yang tersedia di bawah lisensi Open Source dan disajikan dari server Google.

Batasan Lisensi

Akhirnya, WebFonts.info telah mengumpulkan daftar wiki'd yang bagus Font tersedia untuk penyisipan @ font-face berdasarkan lisensi. Ini tidak mengklaim sebagai daftar yang lengkap, tetapi font di atasnya harus tersedia (mungkin dengan kondisi seperti atribusi dalam file CSS) untuk penyematan / penautan. Sangat penting untuk membaca lisensi, karena ada beberapa batasan yang tidak didorong jelas pada unduhan font.


126
2017-12-27 22:27



Mencoba Facetype.js, Anda mengonversi font .TTF Anda menjadi file Javascript. Lengkap SEO kompatibel, mendukung FF, IE6 dan Safari dan menurunkan anggun di browser lain.


9
2018-02-15 11:22



Tidak, tidak ada solusi yang layak untuk tipe tubuh, kecuali jika Anda hanya ingin melayani mereka dengan browser yang berdarah.

Microsoft telah PAKAN, teknologi font-embedding milik mereka sendiri, tetapi saya belum pernah mendengarnya selama bertahun-tahun, dan saya tidak tahu siapa pun yang menggunakannya.

Saya bertahan dengan sIFR untuk tipe tampilan (judul, judul posting blog, dll.) Dan menggunakan salah satu font web-safe yang kurang usang untuk tipe tubuh (seperti Trebuchet MS). Jika Anda bosan dengan semua font web-aman, Anda mungkin mendefinisikan istilah terlalu sempit - lihat matriks ini dari stok font bahwa kapal dengan OS besar dan kemungkinan Anda akan dapat menemukan kaskade huruf yang akan menangkap hampir semua pengguna web.

Contohnya: font-family: "Lucida Grande", "Verdana", sans-serif adalah kaskade huruf umum; OS X hadir dengan Lucida Grande, tetapi mereka dengan Windows akan mendapatkan Verdana, font web-safe dengan huruf-huruf dengan ukuran dan bentuk yang sama dengan Lucida Grande. Pengguna Linux juga akan mendapatkan Verdana jika mereka telah menginstal paket font web-aman yang ada di sebagian besar manajer paket distro, atau mereka akan kembali ke sans-serif biasa.


6
2017-10-20 23:17



Dan itu juga tidak mungkin - EOT adalah format yang cukup ketat yang hanya didukung oleh IE. Baik Safari 3.1 dan Firefox 3.1 (baik alpha saat ini) dan mungkin Opera 9.6 mendukung true type font (ttf) embedding, dan setidaknya Safari mendukung font SVG melalui mekanisme yang sama. Daftar terpisah memiliki diskusi yang baik tentang hal ini sementara waktu kembali.


4
2017-10-20 23:06



Periksa Typekit, opsi komersial (mereka juga memiliki paket gratis).

Ini menggunakan teknik yang berbeda tergantung pada browser yang digunakan (@font-face vs. EOT format), dan mereka mengurus semua masalah lisensi font untuk Anda juga. Ini mendukung semuanya ke IE6.

Berikut beberapa info lebih lanjut tentang cara kerja Typekit:


3
2017-12-27 22:29



Saya bertanya ini beberapa waktu lalu. Jawabannya pada dasarnya adalah itu tidak berhasil. :(


2
2017-10-20 23:17