แบบอักษรของคุณบนหน้า Font-Face: เชื่อมต่อฟอนต์ที่ไม่ได้มาตรฐาน ฉันจะตั้งค่าฟอนต์สำหรับหน้า html ได้อย่างไร

จากผู้เขียน:ยินดีต้อนรับสู่หน้าบล็อก Webformyself ในบทความนี้ผมขอตอบคำถามเกี่ยวกับวิธีการตั้งค่าแบบอักษรใน html บางคนยังทำผิดวิธี ดังนั้น สิ่งสำคัญคือต้องพิจารณาเรื่องนี้อย่างรอบคอบมากขึ้น

วิธีตั้งค่าแบบอักษรก่อนหน้านี้

ก่อนหน้านี้ html ใช้แท็กแบบอักษรที่จับคู่แบบพิเศษ ซึ่งทำหน้าที่เป็นคอนเทนเนอร์สำหรับเปลี่ยนพารามิเตอร์แบบอักษร เช่น แบบอักษร สี และขนาด วันนี้แนวทางนี้ผิดโดยพื้นฐาน ทำไม มาตรฐานเว็บกำหนดว่าไม่ควรเขียนลักษณะที่ปรากฏของหน้าในมาร์กอัป html นอกจากนี้ แท็กได้รับการสนับสนุนอย่างเต็มที่ใน HTML เวอร์ชันเก่ามากเท่านั้น - HTML 3

ตั้งค่าฟอนต์ใน html ให้ถูกต้อง

วันนี้เพื่อจุดประสงค์นี้ควรใช้เฉพาะความเป็นไปได้ของ css เท่านั้น ภาษานี้ถูกสร้างขึ้นเพื่อกำหนดลักษณะที่ปรากฏผ่านมัน นอกจากนี้ยังมีคุณสมบัติอื่นๆ อีกมากมายใน css ที่ส่งผลต่อรูปลักษณ์ของข้อความ ลองดูที่แต่ละรายการ:

รูปแบบตัวอักษร. ระบุสไตล์ของข้อความ ใช้ค่าต่อไปนี้:

ตัวอักษรตัวแปร คุณสมบัติระบุวิธีตีความการสะกดของตัวพิมพ์เล็ก มีเพียงสองความหมาย:

ปกติ - พฤติกรรมปกติ

ตัวพิมพ์เล็ก - ตัวอักษรตัวพิมพ์เล็กทั้งหมดจะถูกแปลงเป็นตัวพิมพ์ใหญ่ และขนาดจะลดลงเล็กน้อยเมื่อเทียบกับแบบอักษรปกติ

ตัวอักษรน้ำหนัก ระบุความกล้าของข้อความ สามารถระบุค่าได้ด้วยคีย์เวิร์ดหรือค่าตัวเลข ลองดูตัวเลือกทั้งหมด:

ปกติ - ข้อความธรรมดา

ตัวหนา - ข้อความตัวหนา

โดดเด่นกว่า - จะแสดงให้โดดเด่นกว่าที่แสดงในองค์ประกอบหลัก

เบากว่า - ตัวอักษรจะหนาน้อยกว่าแม่

มันง่ายมาก นอกจากนี้ยังสามารถตั้งค่าเป็นตัวเลขตั้งแต่ 100 ถึง 900 โดยที่ 900 เป็นตัวหนาที่สุด ตัวอย่างเช่น ปกติคือ 400 และตัวหนาคือ 700

น่าเสียดายที่เบราว์เซอร์ส่วนใหญ่ไม่รู้จักค่าตัวเลขเหล่านี้และสามารถใช้ได้เพียงสองค่าคือค่าปกติและตัวหนา สำหรับการทดสอบ ฉันสร้างย่อหน้า 9 ย่อหน้า และให้น้ำหนักข้อความแต่ละย่อหน้าต่างกัน ตั้งแต่ 100 ถึง 900 จากนั้นฉันเปิดหน้าเว็บนี้ในเบราว์เซอร์ที่แตกต่างกัน และไม่มีหน้าใดแสดงสไตล์ที่แตกต่างกันเลย สรุป: เป็นการดีกว่าที่จะไม่ใช้ค่าตัวเลข

ขนาดตัวอักษร. คุณสมบัตินี้ระบุขนาดของตัวอักษร ขนาดสามารถระบุได้ในค่าสัมพัทธ์และค่าสัมบูรณ์ต่างๆ ส่วนใหญ่มักจะระบุขนาดเป็นพิกเซล หน่วย em สัมพัทธ์ และเปอร์เซ็นต์ หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการตั้งค่าขนาดใน css ให้อ่านสิ่งนี้ซึ่งอธิบายทุกอย่างโดยละเอียด

ครอบครัวแบบอักษร บางทีอาจเป็นคุณสมบัติพื้นฐานที่สุดที่กำหนดตระกูลหรือชื่อเฉพาะของฟอนต์ที่ใช้ หากคุณใช้ชื่อเฉพาะ คุณต้องแน่ใจว่าสามารถพบแบบอักษรที่ระบุในคอมพิวเตอร์ของผู้ใช้ทั้งหมด เพื่อความน่าเชื่อถือ คุณต้องระบุตัวเลือกอื่นหรือทั้งตระกูลโดยคั่นด้วยเครื่องหมายจุลภาค แบบอักษรแบ่งออกเป็นตระกูลต่อไปนี้:

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

สัญกรณ์ย่อ

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

ฟอนต์: ฟอนต์สไตล์ | แบบอักษรตัวแปร | น้ำหนักตัวอักษร | ขนาดตัวอักษร | ครอบครัวแบบอักษร;

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

วิธีตั้งค่าฟอนต์ใน html เป็นองค์ประกอบต่างๆ

ดังนั้นเราจึงรู้สึกทึ่งกับคำอธิบายคุณสมบัติทั้งหมดของแบบอักษร นี่เป็นข้อมูลที่สำคัญมาก แต่จะตั้งค่าอย่างไรให้ถูกต้องโดยทั่วไป? ใช้ตัวเลือกที่เหมาะสมเพื่อเข้าถึงองค์ประกอบที่เหมาะสม ด้านล่างฉันขอเสนอตัวอย่าง:

p a( ตระกูลแบบอักษร: Verdana, sans-serif; )

สำหรับข้อมูลแบบตาราง มีการตั้งค่าพารามิเตอร์ฟอนต์มากมาย: ตัวพิมพ์ใหญ่แบบย่อ รูปแบบตัวหนา ขนาดฟอนต์ และชื่อ

วันก่อนฉันตัดสินใจเริ่มวิดพื้นอีกครั้งครูคนหนึ่งที่ฉันเคารพอ้างว่าแบบฝึกหัดนี้เกือบจะมีเอฟเฟกต์มหัศจรรย์หากทำอย่างถูกต้อง

ฉันทำการทดลองกับตัวเองและเพื่อให้ยากขึ้นที่จะข้ามไป ฉันตัดสินใจเปิด "สมุดบันทึกสำหรับห้องปฏิบัติการ" สู่สาธารณะและโพสต์ลงในบล็อกร้าง

การออกแบบเก่าไม่เข้ากับแนวคิดใหม่และฉันก็ไม่ลังเลที่จะกดไลค์จากที่เก็บ WordPress ทั่วไปไม่มากก็น้อย

คุณรู้หรือไม่ว่าปัญหาที่เกิดขึ้นกับเทมเพลตสำเร็จรูปที่นำมาจากที่นั่นคืออะไร? ปัญหาคือความเข้ากันได้กับแบบอักษรซีริลลิกเงอะงะในกรณีของฉันส่วนหัวได้รับความเดือดร้อน เนื่องจากฟอนต์ที่อ้างอิงโดย CSS ไม่มีอักขระรัสเซีย จึงนำมาจากฟอนต์เริ่มต้น (ทั้ง Sans หรือ Arial) เป็นผลให้พาดหัวข่าวใหญ่โตและทำลายรูปลักษณ์ทั้งหมด ฉันต้องคิด กว่าจะเปลี่ยนฟอนต์

มีหลายวิธีในการทำเช่นนี้

วิธีที่ 1: เป็นใบ้

ความจริงที่ว่าคุณพบฟอนต์ที่เหมาะสมบนเว็บ ติดตั้งบนคอมพิวเตอร์ของคุณ เขียนใน CSS และดูไซต์ของคุณตามที่ตั้งใจไว้

ส่วนที่เหลือยังคงเห็นอย่างดีที่สุดด้วยแบบอักษรเริ่มต้นและที่แย่ที่สุดก็แยกจากกัน

อย่าทำ!

วิธีที่ 2: แปลงการออกแบบเป็นแบบอักษรมาตรฐาน

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

แบบอักษรที่ปลอดภัยที่พบในระบบปฏิบัติการเกือบทั้งหมดคือ: Verdana (เหมาะสำหรับข้อความ), ผลกระทบ (บางครั้งก็ดีมากในหัวข้อข่าว), Arial, Arial Black, Comic Sans MS (kaka ซึ่งเป็นที่นิยมมากสำหรับผู้เริ่มต้น),คูเรียร์นิว (เหมาะสำหรับตัวอย่างโค้ดและแบบฟอร์ม), จอร์เจีย, Times New Roman, Trebuchet MS.

วิธีที่ 3: รูปภาพแทนข้อความ

ตัวเลือกนี้เป็นเบราว์เซอร์ข้ามมากและเหมาะสำหรับการออกแบบองค์ประกอบคงที่ ตัวอย่างเช่น ส่วนหัวของไซต์ คุณสร้าง PNG แบบโปร่งใสพร้อมข้อความในแบบอักษรที่ต้องการ ประมวลผลตามที่คุณต้องการแล้ววางลงในไซต์ อย่าลืมกรอก ALT หรือสิ่งเดียวกัน แต่เราติดข้อความบนพื้นหลังบางส่วนและบันทึกเป็น JPG

นอกจากส่วนหัวแล้ว ฉันต้องเปลี่ยนรูปลักษณ์ของชื่อโพสต์และวิดเจ็ต ทำไมไม่สร้างภาพแยกต่างหากพร้อมชื่อสำหรับแต่ละรายการ

แม้ว่าจะมีช่างฝีมือที่สร้างรูปภาพพร้อมข้อความหัวเรื่องโดยใช้สคริปต์ของเซิร์ฟเวอร์ แต่นี่ก็เป็นการบิดเบือนอยู่แล้ว

วิธีที่ 4: Cufon

แอพเพล็ตเหล่านี้สามารถสร้างขึ้นจากไฟล์ฟอนต์โดยใช้ตัวสร้างออนไลน์ http://cufon.shoqolate.com/generate/

วิธีที่ง่ายที่สุดคือการใช้ http://www.google.com/fontsเลือกแบบอักษรที่ต้องการจากแบบอักษรที่นำเสนอและรับโค้ดสำเร็จรูปที่คุณต้องใส่ลงในไซต์ (ในส่วนหัวและในไฟล์สไตล์) หลังจากนั้นทุกอย่างก็ใช้งานได้

แต่ฉันไม่ต้องการใช้จาวาสคริปต์เพิ่มเติม กังวลกับการสร้างแอปเพล็ต ฯลฯ ฉันต้องการทำทุกอย่างอย่างรวดเร็วและง่ายดาย ยิ่งกว่านั้นไฟล์ที่มีแบบอักษรที่ต้องการนั้นมีให้ใช้งานมานานแล้ว

วิธีที่ 4: เชื่อมต่อแบบอักษรกับไซต์โดยใช้ CSS

อินเทอร์เน็ตเต็มไปด้วยคำแนะนำเกี่ยวกับเรื่องนี้ อย่างไรก็ตาม เมื่อได้ลองห้าอันแล้ว ฉันก็พบกับผลลัพธ์ที่เลวร้าย แบบอักษร TTF ของฉันแสดงอย่างถูกต้องใน IE เท่านั้น ในเบราว์เซอร์อื่นๆ มันถูกแทนที่ด้วย Arial อย่างไร้ความปราณี

ฉันขอสารภาพว่าฉันไม่ใช่แฟนของ IE และคิดว่ามันเป็นเบราว์เซอร์สำหรับดาวน์โหลดเบราว์เซอร์ ไม่มีอีกแล้ว! ดังนั้นฉันต้องทำการปรับปรุงเล็กน้อย

ในการเชื่อมต่อฟอนต์กับไซต์โดยใช้ CSS เราจำเป็นต้องมีฟอนต์เอง (ไฟล์) และตัวแปลงออนไลน์ http://onlinefontconverter.com/

มีตัวแปลงฟอนต์ออนไลน์มากมาย บางอันที่ใกล้เคียงและใหม่ปรากฏขึ้นแทนที่ ดังนั้นหากอันที่เฉพาะนี้ไม่มีอยู่แล้ว ให้ค้นหาในเครื่องมือค้นหาสำหรับคำค้นหาเช่น "ตัวแปลงฟอนต์ออนไลน์" และลองแปลงฟอนต์ที่นั่น ในโพสต์นี้ ตัวแปลงที่กำหนดจะถูกใช้เป็นตัวอย่าง

1. ไปที่เว็บไซต์ตัวแปลง ให้จับฟอนต์ที่คุณมีแล้วลากไปที่หน้าต่างนี้ (โดยปกติจะอยู่ในคอลัมน์ด้านขวา)

2. ดาวน์โหลดฟอนต์ ใน 4 เวอร์ชัน: EOT, OTF, TTF และ WOFF เท่านี้ก็น่าจะเพียงพอแล้ว เบราว์เซอร์ในกระบวนการแสดงผลหน้าจะเลือกและดาวน์โหลดไฟล์ที่สะดวกกว่า

3. กรอกแบบอักษร ไปที่เว็บไซต์ ฉันสร้างโฟลเดอร์สำหรับสิ่งนี้ในรูทของไซต์ "ฉ"และโพสต์ไว้ที่นั่น

อัปเดต 16/02/2015:สำหรับตอนนี้ ออนไลน์ฟอนต์คอนเวอร์เตอร์.คอมจัดแจงใหม่และไม่มีแบบอักษรที่เสนอที่เขาแปลง ((

ฉันต้องใช้ font2web.com อันนี้ให้ฟอนต์ที่จำเป็นทั้งหมดพร้อมกันในชุดเดียวในไฟล์เก็บถาวร สะดวกสบาย!

4. เชื่อมต่อการอัปโหลดฟอนต์กับไซต์ ในการทำเช่นนี้ ในไฟล์ css หรือในแท็กสไตล์ที่เกี่ยวข้อง ให้ป้อนรหัสนี้

@font-face( ตระกูลแบบอักษร: EtoMoiFont; src: url(/f/myFont1.eot), url(/f/myFont1.otf), url(/f/myFont1.ttf), url(/f/myFont1. วูฟ); )

ครอบครัวแบบอักษร: EtoMoiFont;- บอกเบราว์เซอร์ว่าฟอนต์ที่โหลดจะเรียกว่าอะไร คิดชื่อตัวเอง

src: url(/f/myFont1.eot), url(/f/myFont1.otf), url(/f/myFont1.ttf), url(/f/myFont1.woff);- ระบุพาธและชื่อของไฟล์ฟอนต์

ทำไมฟอนต์ถึงเรียงตามนี้

อันดับแรก,ฉันใส่ สพป. รูปแบบนี้ใช้โดย IE เวอร์ชันเก่า

ที่สอง — อปท. นี่คือรูปแบบฟอนต์ที่ถูกบีบอัดซึ่งตามทฤษฎีแล้วจะมีน้ำหนักน้อยกว่า

ที่สาม — ทีทีเอฟ. เบราว์เซอร์เกือบทั้งหมดเข้าใจ แม้ว่ามันจะเกิดขึ้นแตกต่างกัน ตัวอย่างเช่นใน iOS อาจไม่เปิดขึ้น

ล่าสุด — วอฟ. สิ่งนี้ควรอ่านได้ดีบน mac แต่ยังไม่มีเวลาทดสอบ

5. กำหนดในไฟล์สไตล์ , ตระกูลฟอนต์ใดที่จะแสดงหัวเรื่อง (ในกรณีของเรา, หัวเรื่อง ชั่วโมง2).

h2(ตระกูลฟอนต์: EtoMoiFont;)

พร้อม!

หากไม่ได้ใช้ฟอนต์ ตรวจสอบให้แน่ใจว่า ประการแรก เว็บไซต์ใช้ไฟล์ css (บางครั้งคุณต้องรีเซ็ตแคช บางครั้งมองหาไฟล์ css อื่น) และประการที่สอง ใช้ฟอนต์สำหรับคลาส ที่คุณระบุ (รหัสหรือแท็ก) จะไม่ถูกบล็อกในไฟล์ css อื่นที่โหลดหลังจากนั้น

ข้อดีของวิธีนี้คือ ในอนาคตฉันสามารถตั้งค่าฟอนต์นี้สำหรับที่เก็บข้อความใดๆ ก็ได้

นี่คือสิ่งที่เกิดขึ้น

ข้อเสียของวิธีนี้คือการตั้งค่าเบราว์เซอร์ของผู้ใช้หวาดระแวงบางรายอาจห้ามการดาวน์โหลดแบบอักษรภายนอก, แฟลช, จาวาสคริปต์, รูปภาพ ฯลฯ

ดังนั้นอย่าขี้เกียจและตรวจสอบไซต์ของคุณจะมีลักษณะอย่างไรหากปิดใช้แบบอักษรที่ดาวน์โหลดได้ ลองเล่นกับตัวที่ปลอดภัย วิธีที่ 2แล้วโหลดของคุณอีกครั้ง หากขนาดเท่ากันมากหรือน้อยและไม่มีอะไรแยกออกจากกัน แสดงว่าอยู่ในลำดับ

และต่อไป! วิธีทดสอบเฉพาะในคอมพิวเตอร์ที่ไม่ได้ติดตั้งแบบอักษรที่คุณจะใช้งาน มิฉะนั้นจะได้ผล ทางหมายเลข 1.

นั่นคือทั้งหมด อยู่กับคุณ
แล้วพบกันอีก.

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

วิธีใส่ฟอนต์บนเว็บไซต์ใน CSS

ตัวอย่างเช่นเรามีแบบอักษร Raleway.ttfและเราต้องการใช้ในส่วนหัวทั้งหมด ( h1) ของเว็บไซต์ของเรา โดยทำตามขั้นตอนต่อไปนี้:

h1 ( ครอบครัวแบบอักษร : "ราลเวย์เรกูลาร์"; }

ตอนนี้ส่วนหัวทั้งหมดของระดับที่ 1 บนเว็บไซต์จะแสดงด้วยแบบอักษรที่เราต้องการ

หากคุณต้องการรวมฟอนต์หลายตัว (หรือสไตล์) ให้เพิ่มไว้ใต้ฟอนต์ก่อนหน้า:

@ใบหน้าแบบอักษร { ครอบครัวแบบอักษร : "ราลเวย์เรกูลาร์"; src : url("../fonts/RalewayRegular.ttf" )รูปแบบ( "ทรูไทป์" ); รูปแบบตัวอักษร : ปกติ; น้ำหนักตัวอักษร : ปกติ; } @ใบหน้าแบบอักษร{ ครอบครัวแบบอักษร : "ราลเวย์ตัวหนา"; src : url("../fonts/RalewayBold.ttf" )รูปแบบ( "ทรูไทป์" ); รูปแบบตัวอักษร : ปกติ; น้ำหนักตัวอักษร : ปกติ; }

คุณอาจสังเกตเห็นว่ามีรูปแบบตัวอักษรที่แตกต่างกัน - .ttf, .woff, .eot, .svgเป็นต้น นอกจากนี้ยังมีรูปแบบสำหรับเบราว์เซอร์สมัยใหม่ วอฟ2แต่เราจะพูดถึงเรื่องนี้ในบทความใดบทความหนึ่งต่อไปนี้ โดยปกติแล้วฟอนต์แต่ละตัวจะเชื่อมต่อพร้อมกันใน 3 รูปแบบ สิ่งนี้ทำเพื่อให้แบบอักษรแสดงอย่างถูกต้องในทุกเบราว์เซอร์รวมถึง และคนเก่า ดูเหมือนว่า:

@ใบหน้าแบบอักษร { ครอบครัวแบบอักษร : "ราลเวย์เรกูลาร์"; src : url( "../fonts/RalewayRegular/RalewayRegular.eot") ; src : url( "../fonts/RalewayRegular/RalewayRegular.eot?#iefix") รูปแบบ ("embedded-opentype" ), url( "../fonts/RalewayRegular/RalewayRegular.woff") รูปแบบ( "วอฟ" ), url( "../fonts/RalewayRegular/RalewayRegular.ttf") รูปแบบ( "ทรูไทป์" ); รูปแบบตัวอักษร : ปกติ; น้ำหนักตัวอักษร : ปกติ; }

ต่อไปนี้ ใส่ใจกับลำดับการเชื่อมต่อ - นี่เป็นสิ่งสำคัญ!

เราจะไม่ลงรายละเอียดเพียงแค่จำรูปลักษณ์ของการออกแบบนี้

หากคุณมีแบบอักษรเพียงรูปแบบเดียว ให้ใช้ตัวแปลงแบบอักษรต่างๆ นี่คือหนึ่งในนั้น

วิธีเชื่อมต่อฟอนต์โดยใช้บริการต่างๆ

วิธีที่ง่ายที่สุดในการเชื่อมต่อแบบอักษร

วิธีเชื่อมต่อฟอนต์กับเทมเพลต Moguta CMS

วิธีเพิ่มลิงก์แบบอักษรของ Google ไปยังเทมเพลต Moguta CMS

นานมาแล้วที่การเลือกแบบอักษรสำหรับการออกแบบเว็บถูกจำกัดให้อยู่ในชุดมาตรฐานที่เรียกว่าชุด "ปลอดภัย" รวมแบบอักษรทั้งหมดเก้าแบบ ได้แก่ Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuched MS และ Verdana ด้วยการพัฒนาภาษามาร์กอัปแบบไฮเปอร์เท็กซ์และสไตล์ชีตแบบเรียงซ้อนที่ใช้ในการออกแบบลักษณะของหน้าเว็บ ทำให้สามารถใช้ฟอนต์เกือบทุกชนิดในการออกแบบเว็บไซต์ได้ โดยไม่คำนึงว่าฟอนต์เหล่านี้จะถูกติดตั้งบนคอมพิวเตอร์ของผู้ใช้หรือไม่

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

วิธีเชื่อมต่อแบบอักษรกับไซต์
การเชื่อมต่อฟอนต์ที่ไม่ได้มาตรฐานเข้ากับไซต์สามารถทำได้อย่างน้อยสองวิธี:

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

การเชื่อมต่อแบบอักษรเข้ากับไซต์อย่างรวดเร็วโดยใช้บริการพิเศษ
มีบริการต่าง ๆ ที่จัดเก็บแบบอักษรที่น่าสนใจต่าง ๆ และให้ความสามารถในการใช้บนเว็บไซต์ต่าง ๆ หนึ่งในบริการดังกล่าวคือ Google Fonts ฟอนต์มีการเชื่อมต่อดังนี้
บริการอื่นที่คล้ายกันคือ WebFont.ru การเชื่อมต่อแบบอักษรทำได้หลายวิธีคล้ายกับตัวอย่างที่กล่าวถึงข้างต้น
การเชื่อมต่อฟอนต์โดยไม่ขึ้นกับบริการอื่นๆ
เพื่อไม่ให้พึ่งพาบริการของบุคคลที่สาม ขอแนะนำให้จัดเก็บและเชื่อมต่อแบบอักษรกับเทมเพลตโดยตรงบนโฮสติ้งหรือเซิร์ฟเวอร์ของคุณ มันค่อนข้างยากกว่า แต่ก็ไม่มากจนงานนี้เป็นไปไม่ได้

1. ดาวน์โหลดไฟล์ฟอนต์ลงในคอมพิวเตอร์ของคุณ ส่วนใหญ่มักจะมีแบบอักษรให้ดาวน์โหลดในรูปแบบ ทีทีเอฟ– TrueType Font พัฒนาโดย Apple และรองรับระบบปฏิบัติการสมัยใหม่มากมาย
   
2. เพื่อให้แน่ใจว่าเข้ากันได้ข้ามเบราว์เซอร์ นั่นคือ ความเข้ากันได้และการแสดงแบบอักษรเดียวกันในเว็บเบราว์เซอร์ที่แตกต่างกัน คุณต้องเชื่อมต่อแบบอักษรกับไซต์ในรูปแบบต่อไปนี้: ทีทีเอฟ, อีต, วูฟ, svg. คุณสามารถแปลงไฟล์ต้นฉบับด้วยแบบอักษรเป็นรูปแบบที่จำเป็นทั้งหมดโดยใช้บริการออนไลน์ เช่น , .
   ควรสังเกตว่าบริการทั้งหมดเหล่านี้บิดเบือนฟอนต์เล็กน้อยระหว่างการแปลงเป็นระดับหนึ่งหรืออีกระดับหนึ่ง ยูทิลิตี้พิเศษที่เรียกว่า FontPrep. แต่สำหรับระบบปฏิบัติการ Mac OS เท่านั้น
   
3. หลังจากได้รับรูปแบบทั้งหมดที่จำเป็นสำหรับการเชื่อมต่อกับไซต์แล้ว ให้สร้างโฟลเดอร์แยกต่างหากในเทมเพลต แบบอักษรที่คุณจะคัดลอกไฟล์ผลลัพธ์
   
4. การเชื่อมต่อแบบอักษรกับไซต์ทำโดยใช้กฎ @font-faceด้วยวิธีการต่อไปนี้

5. ส่วนที่ง่ายและสนุกที่สุดยังคงอยู่ - การกำหนดแบบอักษรที่กำหนดเองให้กับองค์ประกอบการออกแบบใดๆ เช่น ทั้งหน้า ดังตัวอย่างต่อไปนี้

   ร่างกาย(
   ครอบครัวแบบอักษร: "ALSStory";
   ขนาดตัวอักษร: 12px
   ) ในพารามิเตอร์ font-family ที่นี่ คุณต้องระบุชื่อของแบบอักษรตามค่าที่คล้ายกันของกฎ @font-face
   

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

สวัสดีเพื่อนรัก! ในโพสต์นี้ฉันต้องการวิเคราะห์ช่วงเวลาสำคัญในการจัดวางเช่น การเชื่อมต่อแบบอักษรที่ไม่ได้มาตรฐาน. ฉันคิดว่านักออกแบบเลย์เอาต์ทุกคนควรหาวิธี "ต่อสู้" กับฟอนต์ที่ไม่ได้มาตรฐาน มิฉะนั้น จินตนาการของนักออกแบบจะจบลงด้วยฟอนต์มาตรฐาน แบบอักษรที่ไม่ได้มาตรฐานในเค้าโครง PSD เป็นปัญหาสำหรับฉันเสมอ: การใช้รูปภาพไม่สะดวกและไม่มีคุณภาพสูง การใช้สคริปต์อย่าง cufon ไม่ใช่ตัวเลือกที่เหมาะสมนัก บางประเด็นที่ระบุในเอกสารประกอบใช้งานไม่ได้สำหรับฉัน และฉันก็ไม่อยากยุ่งเกี่ยวกับเรื่องนี้เลย

เมื่อเร็ว ๆ นี้ ฉันเริ่มใช้ฟอนต์ที่ไม่ได้มาตรฐานโดยตรงจากเทมเพลตโดยใช้กฎ @font-face css วิธีการนี้ช่วยให้เราสามารถโหลดฟอนต์ได้โดยตรงจากเทมเพลตไซต์ หากไม่ได้ติดตั้งบนระบบปฏิบัติการของผู้ใช้

รหัส css จะมีรหัสต่อไปนี้:

@font-face ( font-family: Arbat; /* ชื่อฟอนต์สำหรับกฎ CSS */ src: local("Arbat"), /* ตรวจสอบว่ามีฟอนต์อยู่ใน OS ของผู้ใช้หรือไม่ */ url(fonts/Arbat.ttf); / * หากเบราว์เซอร์ไม่พบแบบอักษรให้โหลดจากเส้นทางที่ระบุ */ ) [...] h1 ( font-family: Arbat; /* ชื่อแบบอักษรนี้สามารถระบุให้กับองค์ประกอบที่จำเป็น */ )

ทุกอย่างจะดี แต่โซลูชันที่ยอดเยี่ยมนี้ไม่เป็นมิตรกับเบราว์เซอร์ข้ามเช่น เบราว์เซอร์บางตัวเท่านั้นที่จะสามารถแสดงแบบอักษรนี้ได้อย่างถูกต้อง ประเด็นคือไม่ใช่ทุกเบราว์เซอร์ที่เข้าใจแบบอักษรรูปแบบ *.ttf

ต่อไปนี้คือตัวอย่างรายการรูปแบบที่เบราว์เซอร์รองรับ:

รูปแบบที่มากมายดังกล่าวเกิดจากการรองรับสูงสุดของเบราว์เซอร์ทั้งหมด ในเวลาเดียวกัน เบราว์เซอร์จะโหลดแบบอักษรตัวแรกที่เข้าใจจากรายการ (หากระบุรูปแบบที่ถูกต้อง) มีการอธิบายรูปแบบตามลำดับน้ำหนักที่เพิ่มขึ้น แต่อย่างไรก็ตามรูปแบบ "วอฟ"ที่เบาที่สุดคือ - "อีโอที". นี่เป็นสิ่งจำเป็นเพื่อหลีกเลี่ยงการแสดงผลที่ไม่ถูกต้องใน IE 6-8

ฉันควรระบุ - รูปแบบหรือไม่

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

เพื่อเปิดใช้งานรูปแบบทั้งหมด โค้ด css ของเราจะอยู่ในรูปแบบต่อไปนี้:

@font-face ( font-family: "Arbat"; src: url("fonts/Arbat.eot"); /* สำหรับการสนับสนุนเบราว์เซอร์ IE6+ */ src: url("fonts/Arbat.eot?#iefix") รูปแบบ ("embedded-opentype"), /* แฮ็กการแสดงผลฟอนต์ IE8 */ url("fonts/Arbat.woff") รูปแบบ("woff"), /* สำหรับเบราว์เซอร์สมัยใหม่ */ url("fonts/Arbat.ttf ") รูปแบบ ("truetype"), url ("fonts/Arbat.svg#arbat") รูปแบบ ("svg"); font-weight: normal; font-style: normal; ) [...] h1 ( font- family: Arbat; /* ชื่อฟอนต์นี้สามารถระบุให้กับองค์ประกอบที่ต้องการได้ */ )

ดังนั้น ในกรณีนี้ ในไดเร็กทอรี " แบบอักษร"ต้องจัดเก็บรูปแบบแบบอักษรเดียวกันทั้งหมดข้างต้น และฉันจะหาได้จากที่ไหนหากติดตั้งเฉพาะรูปแบบในระบบปฏิบัติการของเรา - ทีทีเอฟ? ในการทำเช่นนี้เราจะใช้บริการพิเศษสำหรับการแปลงรูปแบบตัวอักษร - http://fontface.codeandmore.com สิ่งที่คุณต้องทำคือดาวน์โหลดฟอนต์ที่ต้องการจาก OS ของเรา คลิกที่ปุ่มสีแดงขนาดใหญ่ “ฉันต้องการชุด @font-face ของฉัน! ” และบริการจะสร้างแพ็คเกจแบบอักษรในรูปแบบที่ต้องการในเวลาไม่กี่วินาที

ความสนใจ! บริการนี้ได้รับการชำระเงินแล้ว ขณะนี้บริการมีให้โดยการสมัครสมาชิกแม้ว่าราคาจะเป็นสัญลักษณ์ - 1 เดือน — 3$

เราเสนอให้ดูการสาธิตทันทีรวมทั้งดาวน์โหลดไฟล์เก็บถาวรพร้อมแบบอักษรและไฟล์ดัชนี

แตกไฟล์เก็บถาวรนี้ลงในไดเร็กทอรีใดๆ ของเทมเพลตของคุณ เช่น สร้างโฟลเดอร์ - ฟอนต์ เปิดไฟล์ .html ด้วยโปรแกรมแก้ไขข้อความ (ในกรณีของฉันคือไฟล์ arbat.html) และคัดลอกกฎแบบอักษรจากที่นั่นแล้ววางลงในไฟล์สไตล์ของคุณ (เฉพาะที่ไม่มีแท็ก "»).

นี่คือรหัสของฉัน:

@font-face ( font-family: "Arbat"; src: url("arbat.eot"); src: url("arbat.eot?#iefix") รูปแบบ("embedded-opentype"), url("arbat .woff") รูปแบบ ("woff"), url ("arbat.ttf") รูปแบบ ("truetype"), url ("arbat.svg#arbat") รูปแบบ ("svg"); font-weight: normal; font - สไตล์: ปกติ ; )

สำคัญ!เปลี่ยนเส้นทางไปยังไฟล์ฟอนต์เป็นไฟล์ที่ถูกต้อง มิฉะนั้นจะไม่มีอะไรทำงาน!

H1 (ตระกูลแบบอักษร: Arbat; ) /* ฉันยกตัวอย่างหัวข้อระดับแรก */

บริการ Font-Face เพิ่มเติม

นอกจากนี้ ฉันยังสามารถเสนอบริการสร้างฟอนต์เฟซฟรี:

พวกเขาดีพอ ๆ กับที่แนะนำ ฉันคิดว่าในนั้นคุณจะเข้าใจเองไม่มีอะไรซับซ้อน

ในที่สุดฉันต้องการทราบข้อดีและข้อเสียทั้งหมดของวิธีนี้

ข้อดี:

• ความเร็วในการโหลดหน้าสูงโดยใช้ฟอนต์ที่ไม่ได้มาตรฐานในปริมาณเท่าใดก็ได้
• ความยืดหยุ่นในการทำงานของผู้ออกแบบเลย์เอาต์สามารถเปลี่ยนแปลงข้อความได้โดยไม่มีปัญหา
• การแสดงผลที่ชัดเจน เนื่องจากนี่คือข้อความ ไม่ใช่รูปภาพหรือแฟลชหรืออย่างอื่น
• ค่อนข้างง่ายในการดำเนินการเนื่องจากการสร้างรูปแบบที่ต้องการ

ข้อบกพร่อง:

• วิธีนี้ไม่ได้รับการสนับสนุนโดยเบราว์เซอร์ทั้งหมด แม้ว่าเราจะใช้รูปแบบที่แตกต่างกัน อย่าลืมว่าแต่ละเบราว์เซอร์สามารถมีได้หลายเวอร์ชัน
• ไฟล์ฟอนต์บางไฟล์อาจมีขนาดค่อนข้างหนักและมีน้ำหนักหลายเมกะไบต์ (แม้ว่าจะสามารถแก้ไขได้) และสิ่งนี้อาจส่งผลต่อความเร็วในการโหลดหน้าเว็บอย่างมาก
• ขณะที่โหลดฟอนต์ ผู้ใช้ยังคงเห็นฟอนต์มาตรฐานอยู่ครู่หนึ่ง (ขึ้นอยู่กับขนาดฟอนต์)
• บางครั้งข้อผิดพลาดเล็กน้อยอาจปรากฏขึ้น - เมื่อวางเมาส์เหนือสีจะผิดเพี้ยน (Safari, Chrome, Opera);
• ฟอนต์อาจมีเจ้าของลิขสิทธิ์ ซึ่งในกรณีนี้จะเป็นการง่ายที่จะขโมย

โดยทั่วไปแล้ว การตัดสินใจว่าจะเชื่อมต่อฟอนต์ที่ไม่ได้มาตรฐานที่คุณใช้ด้วยวิธีใดนั้นขึ้นอยู่กับคุณ ตัวเลือกนี้เหมาะกับฉันเป็นการส่วนตัว

นั่นคือทั้งหมดที่ฉันอยากจะพูดเกี่ยวกับการเชื่อมต่อแบบอักษรที่ไม่ได้มาตรฐาน ฉันหวังว่าจะได้รับข้อเสนอแนะในความคิดเห็น โชคดีทุกคน! เจอกันใหม่กระทู้หน้า...