Bày tỏ IT

CSS hoàn thành 10 năm tồn tại năm này! Những người đã được khoảng một thời gian, kiếm được bánh mì của họ (hoặc không) bằng cách sử dụng CSS, sau đó bạn có thể biết làm thế nào chúng tôi đã được đói cho một lựa chọn tốt của phông chữ. Ngay cả với việc thiếu các phông chữ, thiết kế giống như những người có CSS Zen Garden đã sử dụng hình ảnh nền CSS để thay thế phông chữ trong việc theo đuổi thực hiện một số công lý cho thiết kế của họ. Chúng tôi cũng đã cố gắng hacks ® Flash / JavaScript để đạt được mục tiêu thiết kế của chúng tôi. Bởi không có phương tiện này là một cách sai lầm để có được các phông chữ mà chúng ta mong muốn vào thiết kế web của chúng tôi, nhưng chắc chắn, nó không phải là cách hấp dẫn nhất. và năm trong thiết kế web, như tôi, đã hoàn toàn dựa vào mười hay phông chữ cho thiết kế của họ.

Phát triển gần đây trong các tiêu chuẩn web và các định dạng phông chữ làm cho nó có thể làm cho văn bản HTML trong các kiểu chữ khác hơn so với các phông chữ mặc định cũ. Đi kèm trong "@ fontface" decleration CSS.

@ Fontface provids một giải pháp để liên kết đến tập tin font chữ thực tế và lấy nó từ trang web. Sử dụng @ fontface, thiết kế có thể sử dụng phông chữ mà không cần phải đóng băng các văn bản như hình ảnh nền. Thực hiện là rất thẳng về phía trước, như hình dưới đây, nhưng như tất cả những điều tốt đẹp có một phần CON nó, không phải tất cả các trình duyệt hỗ trợ một "phông chữ". Nếu bạn đang có kế hoạch sử dụng @ fontface trong trang web với yêu cầu hỗ trợ trình duyệt chéo, sau đó bạn sẽ phải cung cấp nguồn cho các loại font khác nhau của cùng một.

1. TrueType - định dạng được thiết kế để xem xét tốt trên màn hình. Giới thiệu đặc biệt của Windows trình duyệt (Chrome).
2. OpenType (CFF) - Định dạng này là tốt hơn cho công việc in ấn và không phải luôn luôn nhìn tốt trên Windows.
3. EOT - Bạn cần định dạng này nếu bạn muốn nhắm mục tiêu Internet Explorer. IE sẽ không sử dụng bất kỳ định dạng khác. EOT của chúng tôi sẽ được coi là "Lite, kể từ khi họ không nén cũng không phải lĩnh vực hạn chế.
4. SVG - Đây là một định dạng XML được hỗ trợ bởi một số trình duyệt bao gồm cả iPhone.
5. WOFF - qua trình duyệt, định dạng phông chữ web chỉ là trọng lượng nhẹ (dữ liệu phông chữ là ZIP) và có thể được biên dịch với một trong hai TrueType hoặc PostScript (CFF) phác thảo. Nó hiện đang được hỗ trợ bởi FireFox 3,6 +.

Sử dụng @ fontface

  @ Font-face {
 font-family: 'CalligraphyFLFRegular';
 src: url ('CalligraphyFLF.eot');
 src: địa phương ('CalligraphyFLF), địa phương (' CalligraphyFLF), định dạng url (CalligraphyFLF.woff ') (WOFF'), url ('CalligraphyFLF.ttf') định dạng (truetype '), url (' CalligraphyFLF định dạng. svg # CalligraphyFLF ') (' svg ');
 }
 @ Font-face {
   font-family: "kiểu chữ";
   src: url ("fonts / font_filename.eot");
   src: địa phương ("tên thay thế"), địa phương ("Alternatename)
     url ("fonts / font_filename.woff") định dạng (WOFF "),
     url ("fonts / font_filename.otf") định dạng ("OpenType"),
     url ("fonts / font_filename.svg # font_filename") định dạng ("svg");
   }
 h2 {font-family: "mặt chữ", Georgia, serif;} 

Như bạn có thể nhìn thấy từ ví dụ trên, bao gồm các phông chữ kiểu chữ được lựa chọn, một trong những liên kết đến một tập hợp các fonttypes cho cùng một kiểu chữ. Do đó người ta gọi nó là "Font Kit".
Có Kits Font có sẵn một cách rõ ràng cho phép liên kết với các tài sản CSS font-mặt dưới End User License Agreement (EULA).

Nguyên ích WebFont:

• @ Font-mặt nhúng phông chữ trang wiki tại http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Ông là một nhà thiết kế phông chữ nổi tiếng, người đã thực hiện hàng trăm các phông chữ TrueType thú vị tự do có sẵn để sử dụng trên web. Phông chữ của ông là thanh lịch, trang trí, và vui tươi.
• Dieter Steffmann là một nhà thiết kế font chữ tuyệt vời. Ông cũng đã thực hiện nhiều phông chữ đẹp có sẵn cho bất cứ ai sử dụng.
• Font cửa hàng : cung cấp các phông chữ được thiết kế đặc biệt để sử dụng web. Hơn 30 của các gia đình FontFont thành công nhất hiện nay có sẵn như là FontFonts Web. FontShop cũng có một WebFont người sử dụng hướng dẫn chi tiết http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Font Squirrel : Giới thiệu tất cả các phông chữ Font Squirrel cung cấp để sử dụng với @ nhúng CSS font-mặt. Font Squirrel cung cấp một số lượng ấn tượng của loại hình, làm cho nó chết đơn giản để chọn một trong ra ngoài, và handily cung cấp bộ dụng cụ "- kiểu chữ của sự lựa chọn của bạn, trong một số định dạng, đóng gói với bản demo HTML & CSS sử dụng rất hiện tại @ font-face cú pháp . Họ cũng cung cấp một cách để làm cho @ font-mặt bộ dụng cụ . Nếu bạn muốn sử dụng kiểu chữ đã được cấp phép một cách thích hợp (những cái mà đi kèm với máy tính của bạn không nhất thiết phải được), máy phát điện sản xuất EOT, SVG, và hey! WOFF các tập tin.

Với hạn chế tập hợp kỹ năng của tôi với các công cụ như Photoshop và Illustrator, tôi có thể thành thật thú nhận rằng tôi là một nhà phát triển tốt hơn so với tôi là một nhà thiết kế. Nhưng nền tảng cốt lõi với tôi (phía máy chủ) phát triển với Java / PHP / COBOL, đã có một ảnh hưởng rất tích cực về phát triển kỹ năng giao diện người dùng của tôi. Những gì tôi có nghĩa là, trong khi tạo ra thiết kế của tôi, tức là bất cứ khi nào tôi làm thiết kế, tôi nghĩ về cách thiết kế có thể được tốt nhất chuyển đổi sang HTML, CSS và trong khi làm HTML, CSS, tôi cho một ý nghĩ về công nghệ phụ trợ và làm cho hợp lý chắc chắn HTML có thể được dễ dàng thực hiện thành XSL vòng hoặc PHP đoạn.

Qua nhiều năm, tôi đã được ném đầu về thiết kế bởi nhà thiết kế giao diện người dùng donot có thể có một đầu mối những gì HTML hoặc CSS. Tất cả những năm qua tôi đã nghĩ rằng tôi sẽ yêu cầu quá nhiều, Nếu tôi chỉ hy vọng các nhà thiết kế, những người đang cố gắng để shov của mình "không thể mã" thiết kế xuống cổ họng của tôi, để hiểu chỉ cần một chút những gì thiết kế của ông sẽ được chuyển đổi vào. RẰNG sẽ giúp đỡ ngay?

Sau đó, tôi đã xem qua bài viết này ngày hôm nay ... nhà thiết kế web có thể không mã ... Cảm ơn Chúa! Tôi chỉ là một trong nhiều người cảm thấy như vậy ... artitle trên là một chút hơi dài .. nhưng giá trị đọc, mỗi từ của nó.

Cảm ơn Elliot Jay Cổ phiếu ... Tôi cảm thấy nhẹ nhõm!

Dưới đây là một số trích đoạn từ Elliots bài viết .

Wow, một ngày! Nó bắt đầu với một tweet ít và kết thúc với một cuộc thảo luận có vẻ như để quét qua toàn bộ cộng đồng thiết kế web. Nó xuất hiện có một số ý kiến ​​rất mạnh mẽ tổ chức về đề tài liệu thiết kế web nên có khả năng mã.
...
Vì vậy, trước khi chúng tôi nhận được vào điều này, cho phép tôi để nhanh chóng tóm lại những gì tôi đã nói sáng nay trên Twitter:

Trung thực, tôi đang bị sốc rằng trong năm 2010, tôi vẫn gặp những "thiết kế web không thể code thiết kế riêng của họ. Không có lý do gì.

... Tôi đã được một chút cụ thể hơn trong tweet của tôi. Tôi đã nói về thiết kế không có thậm chí cả HTML và CSS kỹ năng cơ bản nhất để biến một thiết kế căn hộ vào một trang web thực tế. Không phải những người cố ý chọn không để mã, những người có thể không. Và tôi cũng đề cập duy nhất để mã front-end ở đây, tất nhiên nó là vô lý để nghĩ rằng thiết kế cũng cần được lập trình kết thúc tuyệt vời trở lại ...

Chúng tôi nhận được 'thiết kế web, gửi trong Illustrator, 300dpi, không thể code, không thống nhất / khả năng sử dụng.
~~ Amy Mahon

Nó nhận được vào cuối, và tôi đã có để bọc này lên bằng cách nào đó. Tôi biết sẽ có nhiều người không đồng ý với tôi, và ý định của tôi là không xúc phạm hoặc làm đảo lộn bất cứ ai có thể không mã, nhưng tôi hy vọng rằng một số những gì tôi đã nói phản ánh một số trong những điểm mà luôn luôn đi lên khi đào sâu vào cuộc tranh luận này.

Vào cuối ngày, tôi không mất ngủ hơn những người có thể mã và những người có thể không. Tôi chỉ thực sự ngạc nhiên khi thấy thiết kế rất nhiều thiếu kỹ năng front-end, như tôi nghĩ đây là một điều của quá khứ.

Cũng đọc các ý kiến, có khoảng 320 ý kiến, như tôi viết ... họ là đáng đọc.
Xin vui lòng đọc Elliots bài đầy đủ ở đây ... Web thiết kế không thể code

Kể từ khi các nút radio và văn bản nội tuyến, vì vậy các văn bản sẽ liên kết chính nó để dưới cùng của nút radio, văn bản sẽ xuất hiện được một chút dưới nút radio.
Nếu bạn muốn sắp xếp lên trên, bạn sẽ phải đặt các đài phát thanh và văn bản vào thùng chứa riêng biệt như divs hoặc kéo dài (nếu thích hợp) và họ sẽ chăm sóc của sự liên kết. Nó sẽ được dễ dàng hơn để sử dụng các tế bào bảng quá, ngắn gọn thiết kế của bạn cho phép nó.

Điều này sẽ không giống nhau trong mọi trình duyệt, như mọi trình duyệt hiển thị radio hơi khác nhau, do đó, luôn luôn là vấn đề kích thước không có vấn đề gì bạn làm.