การแสดงไอที

CSS เสร็จดำรงอยู่ 10 ปีในปีนี้! บรรดาผู้ที่ได้รับรอบในขณะที่รายได้ขนมปัง (หรือไม่) ใช้ CSS ของพวกเขาแล้วคุณอาจตระหนักถึงวิธีการที่เราได้รับการอดอาหารเพื่อเลือกที่ดีของแบบอักษร แม้จะมีการขาดนักออกแบบตัวอักษรเช่นเดียวกับที่ที่ การ์เด้น CSS เซน ได้ทำให้การใช้ CSS ภาพพื้นหลังที่จะเปลี่ยนแบบอักษรในการแสวงหาความยุติธรรมในการดำเนินการบางอย่างเพื่อการออกแบบของพวกเขา เราได้พยายามยัง Flash / JavaScript hacks ®เพื่อให้บรรลุเป้าหมายในการออกแบบของเรา โดยไม่นี้เป็นวิธีที่ผิดที่จะได้รับแบบอักษรที่เราต้องการในการออกแบบเว็บของเรา แต่แน่นอนมันไม่ได้เป็นวิธีที่ต้องการมากที่สุด และมากกว่าปีที่ผ่านมานักออกแบบเว็บไซต์เช่นฉันได้อาศัยอย่างเต็มที่ในสิบหรือเพื่อให้แบบอักษรสำหรับการออกแบบของพวกเขา

การพัฒนาล่าสุดในเว็บมาตรฐานและรูปแบบตัวอักษรทำให้มันไปได้ที่จะแสดงข้อความ HTML ใน typefaces อื่นนอกเหนือจากที่เดียวกันแบบอักษรเริ่มต้นเก่า มาใน "@ fontface" decleration CSS

@ fontface provids วิธีการแก้ปัญหาที่จะเชื่อมโยงไปยังแฟ้มตัวอักษรที่เกิดขึ้นจริงและเรียกดูได้จากเว็บ การใช้ fontface @ นักออกแบบสามารถใช้แบบอักษรโดยไม่ต้องตรึงข้อความเป็นภาพพื้นหลัง การดำเนินงานเป็นอย่างมากตรงไปข้างหน้าดังที่แสดงด้านล่าง แต่เป็นทุกสิ่งที่ดีมีส่วน CON ให้มันเบราว์เซอร์ที่ไม่สนับสนุนคนเดียว "ประเภทของตัวอักษร" หากคุณกำลังวางแผนที่จะใช้ fontface @ ในไซต์ที่มีการกำหนดให้การสนับสนุนเบราว์เซอร์ข้ามแล้วคุณจะต้องให้แหล่งที่มาชนิดตัวอักษรต่างๆของเดียวกัน

1. TrueType - รูปแบบการออกแบบให้ดูดีบนหน้าจอ แนะนำอย่างยิ่งสำหรับเบราว์เซอร์ของ Windows (Chrome)
2. OpenType (CFF) - รูปแบบนี้จะดีกว่าสำหรับงานพิมพ์และไม่เคยดูดีบน Windows
3. EOT - คุณต้องรูปแบบนี้ถ้าคุณต้องการที่จะกำหนดเป้าหมายของ Internet Explorer IE จะไม่ใช้รูปแบบอื่น ๆ EOT ของเราจะได้รับการพิจารณา "Lite" ตั้งแต่พวกเขาจะถูกบีบอัดและไม่โดเมนที่ จำกัด
4. SVG - นี่คือรูปแบบ XML ได้รับการสนับสนุนโดยเบราว์เซอร์บางชนิดรวมทั้ง iPhone
5. WOFF - นี้ cross-browser, รูปแบบตัวอักษรบนเว็บอย่างเดียวคือน้ำหนักเบา (ข้อมูลตัวอักษรเป็นซิปที่ถูกบีบอัด) และสามารถรวบรวมกับทั้ง TrueType หรือ PostScript (CFF) สรุป ได้รับการสนับสนุนในขณะนี้โดย Firefox 3.6 +

โดยใช้ @ fontface

  @ font-face {
 font-family: 'CalligraphyFLFRegular';
 src: url ('CalligraphyFLF.eot');
 src: ท้องถิ่น ('CalligraphyFLF'), ท้องถิ่น ('CalligraphyFLF') รูปแบบ url ('CalligraphyFLF.woff') ('woff'), url ('CalligraphyFLF.ttf') รูปแบบ ('TrueType'), url ('CalligraphyFLF 'รูปแบบ) (' svg # CalligraphyFLF svg ').
 }
 @ font-face {
   font-family: "แบบอักษรของคุณ";
   src: url ("แบบอักษร / font_filename.eot");
   src: ท้องถิ่น ("ชื่ออื่น") ท้องถิ่น ("Alternatename"),
     URL รูปแบบ ("แบบอักษร / font_filename.woff") ("woff"),
     URL รูปแบบ ("แบบอักษร / font_filename.otf") ("OpenType"),
     URL รูปแบบ ("แบบอักษร / font_filename.svg font_filename #") ("svg");
   }
 h2 {font-family: "แบบอักษรของคุณ", จอร์เจีย, serif;} 

ที่คุณสามารถดูจากตัวอย่างข้างต้นจะรวมตัวอักษรแบบอักษรเลือกหนึ่งที่มีการเชื่อมโยงไปยังชุดของ fonttypes สำหรับแบบอักษรเดียวกัน ดังนั้นคนเรียกมันว่า "Kit Font"
มีชุดตัวอักษรที่มีอยู่ที่ชัดเจนให้เชื่อมโยงกับสถานที่ให้บริการ CSS @ font-face ไปได้ภายใต้ข้อตกลงใบอนุญาตของผู้ใช้ (EULA) คือ

แหล่งข้อมูลที่เป็นประโยชน์ WebFont:

• แบบอักษรสำหรับ @ font-face ฝัง หน้า wiki ที่ http://webfonts.info/wiki/index.php?title=Main_Page
  
• เรย์ Larabie . เขาเป็นนักออกแบบตัวอักษรที่มีชื่อเสียงที่ได้ทำหลายร้อยแบบอักษร TrueType ที่น่าสนใจได้อย่างอิสระสำหรับการใช้บนเว็บ แบบอักษรของเขาเป็นอย่างหรูหราตกแต่งและขี้เล่น
• Dieter Steffmann เป็นผู้ออกแบบแบบอักษรอื่นที่ดี เขาก็มีแบบอักษรที่สวยงามหลายใช้ได้สำหรับทุกคนใช้
• ร้านค้าแบบอักษร : แบบอักษรที่มีการออกแบบเฉพาะสำหรับการใช้งานเว็บ มากกว่า 30 ที่ประสบความสำเร็จมากที่สุดครอบครัว FontFont ตอนนี้ใช้ได้เป็น FontFonts เว็บ FontShop นอกจากนี้ยังมีผู้ใช้ WebFont รายละเอียดคู่มือ http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• กระรอกตัวอักษร : การแสดงผลงานแบบอักษรทั้งหมดที่กระรอกตัวอักษรสำหรับการใช้งานกับ @ font-face ฝัง CSS กระรอกตัวอักษรมีปริมาณที่น่าประทับใจของประเภทของการทำให้ตายง่ายที่จะเลือกหนึ่งที่ออกและเสนอคล่องแคล่ว "ชุด" - แบบอักษรที่คุณเลือกในหลายรูปแบบพร้อมกับการสาธิต HTML & CSS ที่ใช้ในปัจจุบันมาก @ ไวยากรณ์ font-face . พวกเขายังมีวิธีที่จะ ทำให้ตัวเองของคุณ @ ชุด font-face . ถ้าแบบอักษรที่คุณต้องการใช้ที่ได้รับการอนุญาตอย่างเหมาะสม (คนที่มากับคอมพิวเตอร์ของคุณจะไม่ถูกต้อง), เครื่องกำเนิดไฟฟ้าผลิต EOT, SVG, และ Hey! ไฟล์ WOFF