2010 13 Mart 2010

@ Font yüzü: sizin seçtiğiniz bir yazı ile ifade; WebFonts kullanma

CSS bu yıl 10 yıl varlığını tamamlandı! CSS kullanarak kendi ekmek (veya değil) kazanç, bir süredir edenler, o zaman biz yazı iyi bir seçim için açlıktan edilmiştir nasıl farkında olabilir. Hatta yazı eksikliği ile de bu gibi tasarımcıların CSS Zen Garden kendi tasarımları bazı adalet yapmanın peşinde fontları değiştirmek için CSS arka plan görüntülerinin kullanımı yaptık. Ayrıca Flash / JavaScript ® kesmek tasarım hedeflerine ulaşmak için çalıştık. Hiçbir şekilde bu bizim web tasarımları içine arzu yazı almak için yanlış bir yoldur, ama kesinlikle, bu en çok arzu edilen bir yol değildir. ve yıllar içinde web tasarımcısı, benim gibi, tamamen kendi tasarımları için on kadar yazı yararlanmıştır.

Web standartları ve yazı biçimleri son gelişmeleri aynı eski varsayılan yazı tipleri dışında yazı HTML metni oluşturmak mümkün kılar. "@ Font yüzü" CSS izleyen zamanlarda geliyor.

@ Font yüzü gerçek yazı dosyaya bağlantı ve web onu almak için bir çözüm provids. @ Font yüzü kullanarak, tasarımcılar arka plan görüntüleri gibi metin dondurmak zorunda kalmadan yazı tiplerini kullanabilirsiniz. Uygulanması, çok yalındır aşağıda gösterildiği gibi değil, bütün iyi şeyleri ona bir CON parçası olduğu gibi, TÜM tarayıcılar tek bir "yazı türü" destekler. Eğer çapraz tarayıcı desteği gerektiren sitesinde @ font yüzü kullanmayı planlıyorsanız, o zaman aynı çeşitli yazı türleri kaynaklardan sağlamak zorunda olacak.

  1. TrueType - ekranda iyi bakmak için tasarlanmış bir biçimi. Özellikle Windows tarayıcıları (Krom) için önerilir.
  2. OpenType (CFF) - Bu format baskı çalışması için daha iyidir ve her zaman Windows üzerinde iyi görünmüyor.
  3. EOT - Internet Explorer hedeflemek istiyorsanız bu format gerekir. IE herhangi bir diğer biçimde kullanmaz. Bizim EOT Kullanıcı onlar ne sıkıştırılmış ne de çünkü etki alanı sınırlı "Lite" olarak düşünülebilir.
  4. SVG - Bu iPhone dahil olmak üzere bazı web tarayıcıları tarafından desteklenen bir XML formatıdır.
  5. ATKI - Bu çapraz tarayıcı, web sadece yazı biçimi (font verileri sıkıştırılmış zip olan) hafif ve TrueType ya da haşiye (CFF) özetliyor biriyle derlenebilir. Şu anda Firefox 3.6 tarafından desteklenen +.

@ Font yüzü kullanma

  @ Font-face {
 font-family: 'CalligraphyFLFRegular';
 src: url ('CalligraphyFLF.eot');
 src: local ('CalligraphyFLF'), yerel ('CalligraphyFLF'), url ('CalligraphyFLF.woff') formatında ('ATKI'), url ('CalligraphyFLF.ttf') formatında ('truetype'), url ('CalligraphyFLF . svg # CalligraphyFLF ') formatında (' svg ');
 }
 @ Font-face {
   font-family: "Senin yazı";
   src: url ("yazı / font_filename.eot");
   src: local ("Alternatif isim"), yerel ("Alternatename"),
     url ("yazı / font_filename.woff") formatında ("ATKI"),
     url ("yazı / font_filename.otf") formatında ("açıştürü"),
     url ("yazı / # font_filename font_filename.svg") formatında ("svg");
   }
 h2 {font-family: "Senin yazı", Gürcistan, serif;} 

Eğer, yukarıdaki örnekte görebilirsiniz seçilen yazı yazı dahil olarak, bir aynı yazı için fonttypes bir dizi bağlamak için vardır. Bu nedenle insanlar "Yazı Takımı" olarak bakın.
Açıkça Son Kullanıcı Lisans Anlaşması (EULA) altında için CSS @ font-face özelliği ile bağlantı sağlayan edinilebilir Yazı Kitleri vardır.

Faydalı yazıtipinin Kaynaklar:

  • @ Font-face gömme kullanılabilir Fontlar az wiki sayfası http://webfonts.info/wiki/index.php?title=Main_Page
  • Ray Larabie . O web'de kullanmak için serbestçe kullanılabilir ilginç TrueType yazı tipleri yüzlerce yaptı tanınmış bir yazı tipi tasarımcısı. Onun yazı, zarif dekoratif ve eğlenceli vardır.
  • Dieter Steffmann başka büyük font tasarımcısı olduğunu. O da kullanmak herkes için pek çok güzel yazı yaptı.
  • Yazı dükkanı : Web kullanımı için özel olarak tasarlanmış yazı tipleri sunuyor. En başarılı FontFont ailelerin 30'dan fazla artık Web FontFonts olarak mevcuttur. FontShop da ayrıntılı bir yazıtipinin kullanıcı kılavuzuna sahiptir http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  • Yazı Sincap : Font Sincap @ font-face CSS gömme kullanım için sunduğu tüm yazı tiplerini müzedir. Yazı Sincap, tipi, etkileyici bir miktar sunuyor birini almak için basit bir ölü yapar ve hiç zorlanmadan "kitleri" sunuyor - seçtiğiniz yazı tipi, çeşitli biçimlerde, demo HTML ve CSS ile paketlenmiş çok güncel @ font-face sözdizimi kullanır . Onlar da bir yol sunuyoruz kendi @ font-face kitleri olun . Kullanmak istediğiniz yazı (bilgisayarınızla birlikte gelen olanları mutlaka tamam değildir) uygun lisanslı olması durumunda, jeneratör EOT, SVG, ve hey! Üretir ATKI dosyaları.

2010 9 Mart 2010

Onun "kodu edemiyor Web tasarımcıları" hakkında

Photoshop ve Illustrator gibi araçlarla benim sınırlı beceri seti ile, ben dürüst ben bir tasarımcı daha olduğunu ben daha iyi geliştirici itiraf edebilirim. Ama çekirdek ile benim arka plan (sunucu tarafı) Java / PHP / COBOL ile kalkınma, benim UI geliştirme becerileri üzerinde çok olumlu bir etkisi olmuştur. Ben tasarımları oluştururken, demek ne, ben tasarım yapmak, yani zaman, ben HTML-CSS yaparken tasarımı en iyi HTML-CSS dönüştürülebilir ve nasıl düşünmek, ben arka uç teknoloji hakkında bir fikir vermek ve makul emin olun HTML kolayca XSL döngüler veya PHP vb parçacıkları içine uygulanabilir olduğunu

Yıllar içinde, muhtemelen donot HTML ya da CSS ne bir ipucu var UI tasarımcıları tarafından tasarımları üzerine kafa atılmış. Tüm bu yıllar ben sadece benim boğazına tasarım yaptığı "kod imkansız" şov çalışıyor tasarımcı, onun tasarım dönüştürülebilir ne biraz anlamak için bekliyorsanız, ben çok fazla soran olacağını düşünüyordum içine. BU sağ yardımcı olacak?

Sonra, ben bugün bu yazı üzerinde geldi ... Web tasarımcıları kim kod olamaz ... Teşekkürler Tanrım! Sadece aynı hissedenler birçok biriyim ... Yukarıda artitle biraz uzun soluklu olduğunu .. ama okuma, Her kelimeyi değer.

Elliot Jay Hisse teşekkürler ... Ben rahatladım hissediyorum!

İşte bazı alıntılar olduğu Elliots makale .

Vay, ne güzel bir gün! Bu küçük bir tweet ile başlayan ve tüm web tasarım topluluk karşısında süpürüp gibiydi bir tartışma ile sona erdi. Bu web tasarımcıları kodu mümkün olup olmayacağını konusunda yapılan bazı çok güçlü görüşler var görünür.
...
Bu içine girmeden önce Yani, beni çabucak Twitter'da bu sabah yaptığı açıklamada, ne recap izin:

Dürüst olmak gerekirse, 2010 yılında yine kendi tasarımları kodu edemiyor 'web tasarımcıları' üzerinden geliyorum ki şok oldum. Hiçbir bahane.

... Benim tweet biraz daha spesifik olmam gerekirdi. Ben gerçek bir site içine düz bir tasarım açmak için bile en temel HTML ve CSS becerileri yok tasarımcılar bahsediyordu. Kasıtlı kodu tercih insanlar; kim yapamaz o. Ve ben de burada sadece ön uç kod bahsediyorum, tabii ki bu tasarımcıları da şaşırtıcı back-end programcılar olmalıdır düşünmek çok saçma ...

Biz kod imkansız Illustrator, 300dpi gönderilen 'web' tasarımları, hiçbir tutarlılığı / kullanılabilirlik olsun.
~ Amy Mahon

Geç oldu, ve ben bir şekilde bu kadar tamamlamayı var. Benimle aynı fikirde olan birçok olacak biliyorum ve benim niyetim kod yapamam kimseye hakaret veya üzgün değil, ama ben söylediklerinizi bazı delving her zaman gelip noktalarından bazılarını yansıtır umuyoruz Bu tartışmanın.

Günün sonunda, ben kod ve kim yapamaz kişiler üzerinde herhangi bir uyku kaybetmek istemiyorum. Ben sadece gerçekten bu geçmişe ait bir şey olduğunu düşündüm olarak, ön uç beceri eksikliği pek çok tasarımcı bulmak için şaşırıyorum.

I yazmak olarak da Yorum okuyup, yaklaşık 320 yorum vardı ... Bir okuma değer onlar.
Elliots tam yazı burada okuyun .. kodu edemiyor Web tasarımcıları


2010 4 Mart 2010

Metin hizalama radyo düğmesini

Radyo düğmesini ve metin satır içi olduğundan, bu yüzden metnin radyo düğmesini altına kendiliğinden düzeliyor olacak, metni biraz radyo düğmesi altında olduğu görünür.
Bu üst hizalamak istiyorsanız, divs veya açıklıklı (uygun) gibi ayrı kaplara radyo ve metin yere sahip olacak ve onlar uyum ilgilenir. Bu tasarım kısa bir izin ile, çok tablo hücreleri kullanmak daha kolay olacaktır.

Her zaman ne olursa olsun boyut sorunlarından olacaksa oluyor böylece her tarayıcı, biraz farklı radyolar görüntüler gibi bu, her tarayıcıda da aynı şekilde bakacağız.


NDK ev | BT İfade | İfade Damak | İfade Penmenship | İfade Awe | İfade Myself