คำแนะนำเกี่ยวกับไอคอน UI ที่ดีขึ้นและคมชัดขึ้นด้วยแบบอักษรบนเว็บ

หากคุณคุ้นเคยกับการใช้รูปแบบภาพบิตแมป (เช่น PNG และ GIF) เพื่อแสดงไอคอนบนเว็บไซต์คุณจะคุ้นเคยกับข้อบกพร่องของมัน ก่อนอื่นขึ้นอยู่กับขนาดและจำนวนข้อมูลสีที่ไอคอนมีขนาดไฟล์ไอคอนอาจมีขนาดใหญ่มาก.

หากเรามีไอคอนมากเกินไปที่จะใส่ในเว็บไซต์ก็อาจทำให้ประสิทธิภาพของเว็บไซต์ช้าลงเนื่องจากเบราว์เซอร์จะต้องดำเนินการตามคำขอ HTTP จำนวนมาก แม้ว่าปัญหานี้สามารถแก้ไขได้ด้วย CSS sprite แต่ขนาดไฟล์ยังคงใหญ่.

ไอคอนบิตแมปยังมีข้อบกพร่องในความยืดหยุ่นและความยืดหยุ่น สมมติว่าเราจำเป็นต้องขยายหรือซูมไอคอนในระดับหนึ่งหรือดูผ่านความละเอียดหน้าจอที่สูงมากเช่นบนจอแสดงผลเรตินา ไอคอนจะแน่นอน เปิดออกมองพร่ามัว.

ถ้าคุณคำนึงถึงเรื่องเหล่านี้ข้างต้นคุณอาจต้องใช้แบบอักษรของไอคอน.

ใช้แบบอักษรไอคอน

แบบอักษรของไอคอน คือชุดไอคอนที่บรรจุในแบบอักษรของเว็บที่สามารถฝังในเว็บไซต์โดยใช้ @ font-face. ดังที่ Chris ที่ CSS-trick ได้ชี้ให้เห็นมีประโยชน์หลายอย่างในการใช้แบบอักษรบนรูปภาพเพื่อส่งไอคอน

• แบบอักษรเป็นวัตถุแบบเวกเตอร์ซึ่งโดยธรรมชาติแล้วมันไม่ขึ้นกับความละเอียดดังนั้นไอคอนจะยังคงความคมชัดในความละเอียดหน้าจอต่าง ๆ รวมถึงความละเอียดหน้าจอที่สูงมาก (เช่นระดับเรตินา).
• นอกจากนี้ยังสามารถปรับขนาดได้ทำให้สามารถขยายได้หลายระดับโดยไม่สูญเสียคุณภาพและความแม่นยำ.
• เนื่องจากไอคอนนั้นเป็นแบบอักษร, นอกจากนี้เรายังสามารถควบคุมสีความโปร่งใสข้อความเงาและปรับขนาดผ่านสไตล์ชีท
• เราสามารถทำให้ไอคอนเคลื่อนไหวด้วย CSS3.
• ไอคอนถูกเรียกด้วย @ font-face กฎที่ได้รับการสนับสนุนตั้งแต่ต้นเป็น Internet Explorer 4 (ด้วย. eot).
• คำขอ HTTP ที่น้อยลงและขนาดไฟล์ที่ต่ำกว่า.

นี่คือแบบอักษรไอคอนฟรีที่ดีที่สุดที่เราสามารถหาได้:

• ตัวอักษรยอดเยี่ยม
• IcoMoon
• ไอคอนโซเชียลมีเดีย
• ไอคอนมูลนิธิ Zurb

ตรวจสอบให้แน่ใจว่าคุณได้ตรวจสอบและปฏิบัติตามใบอนุญาตก่อนที่จะฝังลงในเว็บไซต์ของคุณเพื่อให้เกียรติกับเวลาของผู้เขียนและทำงานหนัก.

@ กฎตัวอักษรหน้า

ดังที่เราได้กล่าวถึงไอคอนจะถูกฝังโดยใช้ @ font-face ปกครองผ่านสไตล์ชีทที่กำหนดใหม่ font-family. ในตัวอย่างต่อไปนี้เราจะใช้สัญลักษณ์เว็บ

 @ font-face font-family: 'WebSymbolsRegular'; src: url ('แบบอักษร / websymbols-regular-webfont.eot'); src: url ('fonts / websymbols-regular-webfont.eot? #iefix') รูปแบบ ('embedded-opentype'), url ('font / websymbols-regular-webfont.woff') รูปแบบ ('woff'), url ('fonts / websymbols-regular-webfont.ttf') รูปแบบ ('truetype'), url ('แบบอักษร / websymbols-regular-webfont.svg # WebSymbolsRegular') รูปแบบ ('svg');  

จากนั้นในเอกสาร HTML เราจะต้องเพิ่มอักขระที่เป็นตัวแทนของไอคอนและแทนที่จะใช้ตัวใหม่ font-family อย่างกว้างขวางในเอกสารเราสามารถทำเฉพาะเจาะจงมากขึ้นโดยการเพิ่มคลาสพิเศษให้กับองค์ประกอบบางอย่างที่ไอคอนจะต้องมีการแสดงผลเช่นนั้น

 
 
ชั่วโมง
 
ผม
 
J
  
ผม
 
 

กลับไปที่สไตล์ชีทเรากำหนดใหม่ font-family สำหรับคลาสนั้นที่เราเพิ่งเพิ่ม:

 .ไอคอนตัวอักษร font-family: WebSymbolsRegular; ขนาดตัวอักษร: 12pt;  

• Demo @ font-face

ใช้องค์ประกอบ Pseudo

หากไอคอนนั้นถือว่าเป็นองค์ประกอบด้านข้างเรายังสามารถส่งไอคอนผ่าน องค์ประกอบหลอก. สมมติว่ามาร์กอัป HTML ของเรามีดังนี้:

 
 
ตอบ
 
ตอบทั้งหมด
 
ข้างหน้า
 
ความผูกพัน
 
ภาพ
 
 

เราสามารถทำได้ด้วยวิธีนี้ในสไตล์ชีท:

 ul.icon-font.pseudo li: ก่อน font-family: WebSymbolsRegular; ระยะขอบ - ขวา: 5px;  ul.icon-font.pseudo li: nth-child (1): ก่อนหน้า content: "h";  ul.icon-font.pseudo li: nth-child (2): ก่อนหน้า content: "i";  ul.icon-font.pseudo li: nth-child (3): ก่อนหน้า content: "j";  ul.icon-font.pseudo li: nth-child (4): ก่อนหน้า เนื้อหา: "A";  ul.icon-font.pseudo li: nth-child (5): ก่อนหน้า content: "I";  

• องค์ประกอบ Pseudo สาธิต

ส่วนตัวใช้ Unicode

มีกรณีที่ไอคอนไม่ได้ฝังอยู่ในตัวอักษร (A, B, C, D, ฯลฯ ) แต่ถูกฝังใน Unicode Private Use เพื่อลดการปะทะระหว่างตัวละคร เช่นเดียวกับใน FontAwesome ผู้เขียนได้เพิ่มรหัสอักขระทั้งหมดลงในสไตล์ชีทซึ่งมีลักษณะดังนี้

 .icon-glass: ก่อนหน้า content: "\ f0c6";  

แต่เมื่อเราจำเป็นต้องฝังไอคอนลงใน HTML โดยตรงสิ่งที่ต้องการรหัสต่อไปนี้ \ f0c6 จะไม่แสดงไอคอนชี้เนื่องจากไม่มีอักขระที่ถูกต้องเข้ารหัสใน HTML.

HTML ต้องการมาร์กอัพอ้างอิงเชิงตัวเลข เพื่อแสดงอักขระพิเศษ เราได้กล่าวถึงเล็กน้อยในบทช่วยสอนก่อนหน้าของเราเกี่ยวกับปุ่ม CSS3; ตัวละครนี้นำหน้าด้วยการรวมกันของเครื่องหมายและ (&) เครื่องหมายแฮช (#) และ x จากนั้นตามด้วยตัวเลขฐานสิบหกที่แทนอักขระ.

ตัวอย่างเช่น f0c6 เป็นตัวเลขฐานสิบหกดังนั้นการอ้างอิงอักขระตัวเลขใน HTML จะเป็น & # xf0c6;, ใน FontAwesome รหัสนั้นจะแสดง ไอคอนคลิปหนีบกระดาษ, ชอบมาก

• สาธิต Unicode

การจัดแบบอักษร

ไอคอนในคอลเล็กชันอาจไม่จำเป็นทั้งหมด ในกรณีนี้เราสามารถวางอักขระที่ไม่ได้ใช้โดยการตั้งค่าแบบอักษรที่ต้องการ ส่งผลให้ขนาดไฟล์ฟอนต์ลดลง. โชคดีที่มีเครื่องมือที่มีประโยชน์จาก FontSquirrel ที่จะทำงานนี้ได้อย่างง่ายดาย @ generator-font.

หลังจากคุณไปที่หน้านั้นและเพิ่มแบบอักษรให้เลือก ผู้เชี่ยวชาญ. คุณจะเห็นตัวเลือกเพิ่มเติม เลือก การจัดกลุ่มแบบกำหนดเอง.

ในตัวอย่างนี้เราใช้ฟอนต์ Sociolico เพื่อแสดงไอคอนโซเชียลมีเดียในเว็บไซต์ของเรา แต่ไอคอนที่เราจำเป็นต้องมีคือ Dribble, Facebook และ Twitter ซึ่งแสดงโดยตัวละครเหล่านี้ตามลำดับ d, f และ เสื้อ. ดังนั้นให้ใส่อักขระเหล่านั้นในฟิลด์อินพุตอักขระเดี่ยวดังนี้:

และเราเสร็จแล้ว ตอนนี้เราสามารถดาวน์โหลดแบบอักษรและในกรณีของฉันขนาดตัวอักษรกลายเป็นเพียง 3Kb ถึง 5Kb ยังจำได้ว่าตัวละครเท่านั้นที่ จะแสดงผลเป็นไอคอนมีเพียง d, f และ t, ในขณะที่ตัวละครอื่น ๆ จะแสดงเป็นตัวอักษรปกติเท่านั้น.

ความคิดสุดท้าย

สิ่งหนึ่งที่เราไม่สามารถทำได้ในการฝึกฝนนี้คือการเพิ่มเอฟเฟกต์ที่มีรายละเอียดสูงเช่นนี้ให้กับไอคอน.

อย่างไรก็ตามหากการออกแบบโดยรวมของเราไม่ต้องการรายละเอียดในระดับนั้นวิธีนี้อาจเป็นวิธีที่ดีกว่าในการแสดงไอคอนในเว็บไซต์ มันมีความยืดหยุ่นปรับขยายได้พร้อมเรติน่าพร้อมไฟล์ขนาดเล็กมาก ๆ เราสามารถขออะไรได้บ้าง?

สุดท้ายหากคุณต้องการดำดิ่งลึกลงไปในหัวข้อนี้เราได้รวบรวมการอ้างอิงที่มีประโยชน์บางอย่างไว้ด้วยกันรวมถึงตัวอย่างและซอร์สโค้ดของเราสำหรับดาวน์โหลด.

• วิธีการสร้างไอคอนของคุณเองบนเว็บไซต์ - WebDesignerDepot.com
• การแสดงฟอนต์และคุณสมบัติของข้อมูล - 24Ways
• ส่วนตัวใช้ Unicode - Wikipedia

• การสาธิต
• แหล่งดาวน์โหลด