Mengekspresikan TI

CSS selesai keberadaan 10 tahun tahun ini! Mereka yang telah sekitar untuk sementara waktu, mendapatkan roti mereka (atau tidak) menggunakan CSS, maka Anda mungkin menyadari bagaimana kita telah kelaparan untuk pilihan font. Bahkan dengan kurangnya font desainer seperti yang di CSS Zen Garden telah memanfaatkan gambar latar belakang CSS untuk mengganti font dalam mengejar keadilan melakukan beberapa desain mereka. Kami juga mencoba Flash / JavaScript ® hacks untuk mencapai tujuan desain kami. Dengan tidak ini adalah cara yang salah untuk mendapatkan font yang kita inginkan ke dalam desain web kami, tapi jelas, itu bukan cara yang paling diinginkan. dan lebih dari web designer tahun, seperti saya, telah sepenuhnya mengandalkan sepuluh atau lebih font untuk desain mereka.

Perkembangan terkini dalam standar web dan format font yang memungkinkan untuk membuat teks HTML dalam tipografi selain huruf default yang sama tua. Datang dalam decleration "fontface @" CSS.

@ Fontface provids solusi untuk link ke file font aktual dan mengambilnya dari web. Menggunakan @ fontface, desainer dapat menggunakan font tanpa harus membekukan teks sebagai gambar latar belakang. Implementasi sangat lurus ke depan, seperti yang ditunjukkan di bawah ini tapi karena semua hal baik memiliki bagian CON untuk itu, TIDAK SEMUA browser mendukung "jenis font" tunggal. Jika Anda berencana untuk menggunakan fontface @ di situs dengan memerlukan dukungan cross browser, maka Anda akan harus menyediakan sumber untuk jenis font-macam sama.

1. TrueType - Sebuah format yang dirancang untuk terlihat baik di layar. Direkomendasikan terutama untuk Windows browser (Chrome).
2. OpenType (CFF) - Format ini lebih baik untuk pekerjaan cetak dan tidak selalu terlihat baik pada Windows.
3. EOT - Anda perlu format ini jika Anda ingin menargetkan Internet Explorer. IE tidak akan menggunakan format lain. EOT kita akan dianggap "Lite", karena mereka tidak dikompresi atau domain-dibatasi.
4. SVG - Ini adalah format XML yang didukung oleh beberapa browser termasuk iPhone.
5. WOFF - Ini cross-browser, web hanya format font adalah ringan (data font yang dikompresi zip) dan dapat dikompilasi dengan baik TrueType atau PostScript (CFF) menguraikan. Hal ini saat ini didukung oleh FireFox 3.6 +.

Menggunakan @ fontface

  @ Font-face {
 font-family: 'CalligraphyFLFRegular';
 src: url ('CalligraphyFLF.eot');
 src: lokal ('CalligraphyFLF'), lokal ('CalligraphyFLF'), format url ('CalligraphyFLF.woff') ('WOFF'), url ('CalligraphyFLF.ttf') format ('truetype'), url ('CalligraphyFLF . svg # CalligraphyFLF ') format (' svg ');
 }
 @ Font-face {
   font-family: "jenis huruf Anda";
   src: url ("font / font_filename.eot");
   src: lokal ("nama alternatif"), lokal ("Alternatename"),
     url ("font / font_filename.woff") format ("WOFF"),
     url ("font / font_filename.otf") format ("OpenType"),
     url ("font / font_filename.svg # font_filename") format ("svg");
   }
 h2 {font-family: "jenis huruf Anda", Georgia, serif;} 

Seperti yang Anda lihat dari contoh di atas, untuk menyertakan jenis huruf font yang dipilih, kita harus link ke satu set fonttypes untuk jenis huruf yang sama. Oleh karena itu orang menyebutnya sebagai "Kit Font".
Ada Kit font yang tersedia yang secara eksplisit memungkinkan menghubungkan dengan properti CSS @ font-face kepadanya berdasarkan Perjanjian Lisensi Pengguna Akhir (EULA).

Berguna WebFont Sumber:

• Tersedia untuk @ font-face embedding font di halaman wiki http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Dia adalah seorang desainer font yang terkenal yang telah membuat ratusan font TrueType menarik tersedia secara bebas untuk digunakan di web. Font-Nya yang elegan, dekoratif, dan lucu.
• Dieter Steffmann lain desainer font yang besar. Dia juga telah membuat font yang indah yang tersedia bagi siapa saja untuk digunakan.
• Font toko : menawarkan font yang dirancang khusus untuk menggunakan web. Lebih dari 30 keluarga FontFont paling sukses adalah sekarang tersedia sebagai FontFonts Web. FontShop juga memiliki pengguna WebFont rinci panduan http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Font Squirrel : Menampilkan semua font yang Font Squirrel menawarkan untuk digunakan dengan @ font-face embedding CSS. Squirrel font menawarkan kuantitas mengesankan jenis, membuatnya mati sederhana untuk memilih salah satu keluar, dan dgn mudah menawarkan "kit" - jenis huruf pilihan Anda, dalam beberapa format, dikemas dengan demo HTML & CSS yang menggunakan saat ini sangat @ font-face sintaks . Mereka juga menawarkan cara untuk membuat sendiri @ font-face kit . Jika jenis huruf yang akan digunakan telah dilisensi tepat (orang yang datang dengan komputer Anda tidak selalu oke), generator menghasilkan EOT, SVG, dan hey! File WOFF.

Dengan terbatasnya kemampuan set-saya dengan tool seperti Photoshop dan Illustrator, jujur ​​saya mengakui bahwa saya adalah seorang pengembang yang lebih baik dari saya seorang desainer. Tapi latar belakang saya dengan inti (sisi server) pengembangan dengan Java / PHP / COBOL, telah menjadi pengaruh yang sangat positif pada keterampilan UI pembangunan. Yang saya maksud adalah, sekaligus menciptakan desain saya, yaitu setiap kali saya melakukan desain, saya berpikir tentang bagaimana desain dapat dikonversi terbaik ke dalam HTML-CSS dan saat melakukan HTML-CSS, saya memberikan pemikiran tentang teknologi backend dan membuat cukup yakin bahwa HTML dapat dengan mudah diimplementasikan ke dalam XSL loop atau PHP potongan dll

Selama bertahun-tahun, saya telah dilemparkan ke kepala desain oleh desainer UI yang mungkin donot memiliki petunjuk apa HTML atau CSS. Bertahun-tahun saya sudah berpikir bahwa saya akan meminta terlalu banyak, Jika aku hanya mengharapkan desainer, yang mencoba shov "tidak mungkin untuk kode" nya desain ke tenggorokan, untuk memahami sedikit apa desain nya akan dikonversi ke dalam. BAHWA akan membantu kan?

Kemudian, saya datang di posting ini hari ini ... desainer Web yang tidak dapat kode ... Terima kasih Tuhan! Aku hanya salah satu dari banyak yang merasakan hal yang sama ... The artitle atas adalah sedikit panjang lebar .. tapi layak baca, setiap kata itu.

Terima kasih Elliot Saham Jay ... saya merasa lega!

Berikut adalah beberapa kutipan dari artikel Elliots .

Wow, apa sehari! Ini dimulai dengan satu menciak sedikit dan berakhir dengan diskusi yang seolah menyapu seluruh komunitas desain web secara keseluruhan. Tampaknya ada beberapa pendapat yang sangat kuat dipegang tentang masalah apakah web designer harus dapat kode.
...
Jadi, sebelum kita masuk ke dalam ini, izinkan saya untuk cepat rekap apa yang saya katakan pada pagi ini di Twitter:

Jujur, saya terkejut bahwa pada tahun 2010 aku masih datang di 'web designer' yang tidak dapat kode desain mereka sendiri. Alasan.

... Aku seharusnya menjadi sedikit lebih spesifik dalam tweet saya. Aku sedang berbicara tentang desainer yang tidak memiliki bahkan HTML dasar dan keterampilan CSS untuk mengubah desain datar ke situs yang sebenarnya. Tidak banyak orang yang dengan sengaja memilih untuk tidak kode; mereka yang tidak bisa. Dan aku juga mengacu hanya untuk front-end kode di sini, tentu saja itu konyol untuk berpikir bahwa desainer juga harus luar biasa back-end programmer ...

Kami mendapatkan 'web' desain dikirim dalam Illustrator, 300dpi, mungkin untuk kode, tidak ada konsistensi / kegunaan.
~ Amy Mahon

Sudah larut, dan aku harus menyelesaikan ini, entah bagaimana. Aku tahu akan ada banyak yang tidak setuju dengan saya, dan niat saya bukan untuk menyinggung atau mengganggu orang yang tidak dapat kode, tapi saya berharap bahwa beberapa dari apa yang saya katakan mencerminkan beberapa poin yang selalu muncul ketika menggali perdebatan ini.

Pada akhir hari, saya tidak kehilangan tidur atas yang dapat kode dan yang tidak bisa. Aku hanya benar-benar terkejut menemukan begitu banyak desainer yang tidak memiliki front-end keterampilan, karena saya pikir ini adalah sesuatu dari masa lalu.

Baca juga komentar, ada sekitar 320 komentar, karena saya menulis ... mereka layak membaca.
Silahkan membaca posting lengkap di sini Elliots .. Web desainer yang tidak dapat kode

Sejak tombol radio dan teks yang inline, sehingga teks akan sejajar sendiri ke bagian bawah tombol radio, Teks akan tampak sedikit di bawah tombol radio.
Jika Anda ingin ini untuk menyelaraskan ke puncak, Anda harus menempatkan radio dan teks ke dalam wadah terpisah seperti divs atau rentang (apabila diperlukan) dan mereka akan mengurus pelurusan. Akan lebih mudah untuk menggunakan sel tabel juga, singkat desain Anda mengijinkannya.

Ini tidak akan terlihat sama di setiap browser, karena setiap browser menampilkan radio sedikit berbeda, sehingga tidak selalu akan menjadi masalah ukuran tidak peduli apa yang Anda lakukan.