Apa teknik font yang digunakan di sini?

8

Ketika saya menghadiri acara ini ( http://worldtour.fogcreek.com/ ), saya perhatikan halaman ini memiliki font khusus untuk bagian Alamat di sudut kiri atas (yaitu "Fog Creek Software 55 Broadway Fl 55 ....") Ketika saya melihat kode sumber saya tidak bisa benar-benar menentukan apa yang mereka lakukan tetapi memenuhi persyaratan ini:

  1. Bekerja dengan baik dengan IE 7,8 (dan semua browser lainnya)
  2. Memungkinkan Anda menggunakan font apa pun yang Anda inginkan
  3. Apakah basis teks, yaitu tidak ada flash, gambar, dll. Dengan demikian lebih baik untuk SEO dan pengindeksan dan semacamnya.

Jadi teknik apa yang mereka gunakan di sini ???

seo html css web-development website-design J Lee
sumber

Jawaban:

13

Mereka menggunakan @font-faceteknik ini. Dengan menggunakan berbagai file dan beberapa deteksi pseudo browser, mereka dapat melayani font secara konsisten di semua browser. Menggunakan:

  • True Type dan WOFF untuk Webkit, Gecko, dan Opera
  • EOT untuk Internet Explorer
  • SVG untuk iOS

Karena cara CSS terstruktur, ia akan memeriksa untuk melihat apakah font tersedia secara lokal, jika tidak dan itu IE, itu akan menggunakan EOT dan tidak memuat apa pun. Dan jika bukan IE maka akan memuat font yang dibutuhkan.

Lihat Squirrel Font untuk info lebih lanjut dan kit @ font-face serta generator @ font-face font dan CSS.

Mereka juga menggunakan text-shadowdengan warna yang mendekati teks. Ini menciptakan efek kabur pada teks.

Eli Gundry
sumber
2

Situs web ini menggunakan teknik font yang disebut WOFF (World Open Font Format). Saat ini sedang distandarisasi berdasarkan rekomendasi oleh W3C. Ini memungkinkan font untuk tertanam langsung di halaman web.

http://en.wikipedia.org/wiki/Web_Open_Font_Format

Baca. Tampaknya konsep yang sangat menarik dan mulai diterima secara luas meskipun sudah disusun tahun lalu.

Matthew Brown
sumber
1
WOFF sendiri tidak akan benar-benar berfungsi pada semua browser (tebak yang mana). Itu sebabnya Anda membutuhkan EOT.
Lèse majesté
2

Periksa juga direktori font Google yang merupakan cara terbaik untuk memulai menggunakan font yang tidak dianggap "web safe." Pada dasarnya, yang harus Anda lakukan adalah menambahkan tag tautan font yang tepat di direktori sebelum css yang menggunakannya. Google akan menentukan browser melalui agen pengguna, dan akan mengeluarkan css font-face yang diperlukan. Anda kemudian dapat menggunakan font di properti "font-family".

Inilah panduan memulai cepat: http://code.google.com/apis/webfonts/docs/getting_started.html

kayu
sumber