Webfonts หรือแบบอักษรที่โหลดในเครื่อง?

Question 1

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

มีวิธีการใหม่ ๆ มากมายและดูเหมือนว่าจะมีรูปแบบต่างๆสำหรับแต่ละวิธี ฉันควรใช้typekitหรือไม่? หรือgoogle webfonts (ด้วย js หรือ css)? ฉันควรใช้ฟอนต์โหลดในเครื่องต่อไปหรือไม่ (เช่นวิธีสร้างแบบอักษร Fontquirrel.com)

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

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

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

Google CSS

ใช้สไตล์ชีตภายนอกเท่านั้น
ใช้เฉพาะไฟล์ประเภทที่เล็กที่สุดที่เข้ากันได้
สามารถใช้@importหรือ<link>หรือนำเนื้อหาของสไตล์ชี ( @font-face) มาใส่ลงในสไตล์ชีทของคุณได้โดยตรง

ผลการทดสอบ

  78ms load of html
  36ms load of css

ป้อนคำอธิบายภาพที่นี่

วิธี Google JS

ใช้webfont.jsในการโหลด styleshet
ใช้เฉพาะไฟล์ประเภทที่เล็กที่สุดที่เข้ากันได้
ผนวก:rootองค์ประกอบด้วยคลาส
เพิ่มสคริปต์ไปที่ส่วนหัว

ผลการทดสอบ

    171ms load of html
    176ms load of js
    32ms load of css

ป้อนคำอธิบายภาพที่นี่

วิธี Typekit

ผนวก:rootองค์ประกอบด้วยคลาส
สามารถใช้*.jsข้อมูลโค้ดหรือโหลดภายนอกไฟล์*.jsไฟล์
ใช้data:font/opentypeแทนไฟล์ฟอนต์
เพิ่มสคริปต์ไปที่ส่วนหัว
เพิ่ม css ที่ฝังไว้ที่ส่วนหัว
เพิ่มสไตล์ชีตภายนอกให้กับส่วนหัว

คุณสามารถเพิ่ม / ลบ / ปรับฟอนต์และตัวเลือกที่กำหนดเป้าหมายได้อย่างง่ายดายจาก typekit.com

ผลการทดสอบ

  169ms load of html
  213ms load of js
  31ms load of css
  3ms load of data:font/

ป้อนคำอธิบายภาพที่นี่

… & วิธี Font Squirrel

@font-face{
    font-weight:400;
    font-style:normal;
    font-family:open_sanslight;
    src:url(../font/opensans-light-webfont.eot);
    src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
        url(../font/opensans-light-webfont.woff) format(woff),
        url(../font/opensans-light-webfont.ttf) format(truetype),
        url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
}

... หรือด้วย data: font method ...

@font-face {
    font-family: 'open_sanslight';
    src: url('opensans-light-webfont-f.eot');
}

@font-face {
    font-family: 'open_sanslight';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),
         url('opensans-light-webfont-f.ttf') format('truetype'),
         url('opensans-light-webfont-f.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;

}

Question 2

ก่อนอื่นฉันจะเคลียร์บางอย่างเกี่ยวกับข้อเสนอของ Google มันจะโหลดรูปแบบที่เล็กที่สุดที่เบราว์เซอร์ของคุณสามารถจัดการได้ WOFF เสนอขนาดไฟล์ที่เล็กและเบราว์เซอร์ของคุณรองรับดังนั้นจึงเป็นขนาดที่คุณเห็น WOFF ยังได้รับการสนับสนุนอย่างกว้างขวาง อย่างไรก็ตามใน Opera คุณอาจได้รับแบบอักษร TrueType

ฉันเชื่อว่าตรรกะขนาดไฟล์ก็เช่นกันทำไม Font Squirrel จึงลองใช้ตามลำดับนั้น แต่นั่นเป็นการคาดเดาส่วนใหญ่ในส่วนของฉัน

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

ตอนนี้ไปที่การพิจารณา CSS เทียบกับ JS ลองดู HTML ต่อไปนี้:

<head>
    <script type="text/javascript" src="script1.js"></script>
    <link rel="stylesheet" type="text/css" href="style1.css" />
    <style type="text/css">
        @import url(style2.css);
    </style>
    <script type="text/javascript">
        (function() {
            var wf = document.createElement('script');
            wf.src = 'script2.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);
        })();
    </script>
</head>

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

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

โดยเฉพาะการพูดถึงแบบอักษร (และโดยเฉพาะอย่างยิ่งข้อเสนอของ Google) ฉันอาจจะยึดติดกับวิธีการ CSS (ฉันชอบ@importเพราะมันคงสไตล์ด้วยสไตล์ชีต แต่นั่นอาจเป็นแค่ฉัน) ไฟล์ JS ที่โหลดโดยสคริปต์ ( http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js ) มีขนาดใหญ่กว่าการ@font-faceประกาศและดูเหมือนจะทำงานได้มากกว่า และฉันไม่เชื่อว่าการโหลดแบบอักษรจริง (WOFF หรือ TTF) เป็นการปิดกั้นดังนั้นจึงไม่ควรทำให้ล่าช้าเกินไป ฉันไม่ได้เป็นแฟนตัวยงของ CDN เป็นการส่วนตัว แต่ความจริงก็คือพวกเขาเร็วจริงๆ เซิร์ฟเวอร์ของ Google จะเอาชนะแผนการโฮสต์ที่ใช้ร่วมกันได้อย่างถล่มทลายและเนื่องจากแบบอักษรของพวกเขาเป็นที่นิยมมากผู้คนจึงอาจแคชไว้แล้ว

และนั่นคือทั้งหมดที่ฉันมี

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

Question 3

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

แหล่งที่มาแบบอักษรที่มีชื่อเสียงอื่น ๆ

cloud.typography

http://www.typography.com/cloud/

จากสิ่งที่ฉันบอกได้ว่าแบบอักษรถูกฝังเป็นข้อมูลในไฟล์ CSS:

@font-face{ 
    font-family: "Font Name"; 
    src: url(data:application/x-font-woff;base64,d09GRk9UVE8AACSCAA0AAAAARKwAAQAAAAAiVAAAAi4AAAadAAAAAAAAAABDRkYgAAAIyAAAFCgAABmIK5m+CkdERUYAABzwAAAAHQAAACAAXQAER1BPUwAAHRAAAAQlAAAYAq+OkMNHU1VC ... ); 
    font-weight:400; font-style:normal; 
}

นี่คือรายละเอียดของฉัน:

94ms load of css from their server
37ms load of css from our server (will vary based on your configuration)
195ms load of data:fonts from our server (will vary based on your configuration)

นี่คือคำอธิบายระดับสูงมากของพวกเขาในการใช้งานของพวกเขา

Fonts.com

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

แบบอักษรที่รู้จักกันดีที่สุดในโลกที่มีอยู่
คลังแบบอักษรขนาดใหญ่จริงๆ (มากกว่า 20,000 รายการ)
ดาวน์โหลดแบบอักษรบนเดสก์ท็อปเพื่อสร้างแบบจำลอง
เครื่องมือที่กำหนดเองสำหรับการทดสอบแบบอักษรของเว็บในเบราว์เซอร์
การควบคุมและการตั้งค่าการพิมพ์ที่ดี
ตัวเลือกการโฮสต์ด้วยตนเอง

FontSpring

ในเครือ FontSquirrel แบบอักษรสามารถซื้อได้ที่นี่ในราคาคงที่ ไฟล์แบบอักษรที่มาพร้อมกับ CSS จะถูกส่งไปเพื่อปรับใช้บนเซิร์ฟเวอร์ของคุณเองเช่นเดียวกับ FontSquirrel

ข้อกำหนดเพิ่มเติม

ข้อดีข้อเสียโดยรวมของบริการแบบอักษรแต่ละรายการมีการเปรียบเทียบบางส่วนดังนี้

ขนาดไลบรารีแบบอักษร

Fonts.com : 20,000+
FontSpring : 1,000+
FontSquirrel : 300+
Google : 600+
Typekit : 900+
Typography.com (cloud.typography.com): น่าจะเป็น 300+ (35 ตระกูล)

ราคา

Fonts.com : $ 20 / เดือนสำหรับการดูเพจ 500,000 ครั้ง
FontSpring : แตกต่างกันไปตามแบบอักษร (ซื้อแบบอักษรครั้งเดียว)
FontSquirrel : ฟรี
Google : ฟรี
Typekit : $ 4 / เดือนสำหรับการดูเพจ 500,000 ครั้ง
Typography.com : $ 12.50 / เดือนสำหรับการดูเพจ 1,000,000 ครั้ง

คุณภาพตัวอักษร

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

Fonts.com : สูง
FontSpring : ผสมเป็นสูง
FontSquirrel : ผสม
Google : ผสม
Typekit : สูง
Typography.com : สูงมาก (ฉันให้การกำหนด "สูงมาก" เนื่องจาก Fonts.com, FontSpring และ Typekit รองรับการหล่อหลายประเภทซึ่งเป็นแบบอักษรจากโรงหล่อ H&FJ เท่านั้นซึ่งเป็นหนึ่งในรูปแบบที่ดีที่สุดในโลก)

คุณภาพตัวอักษร II: วิชาการพิมพ์

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

Fonts.com : kning , การเว้นวรรคอักษร, การผูกมัด, อักขระทางเลือก, เศษส่วน, ฯลฯ
FontSpring : ไม่มี
FontSquirrel : ไม่มี
Google : ไม่มี
Typekit : ไม่มี
Typography.com : ตัวพิมพ์เล็ก, ลิเกเจอร์, อักขระทางเลือก, รูปแบบตัวเลขทางเลือก, เศษส่วน ฯลฯ

รองรับเบราว์เซอร์

โดยส่วนใหญ่จะเป็นรูปแบบฟอนต์ที่แต่ละบริการรองรับ ที่สำคัญ ได้แก่ :

EOT: สำหรับ Internet Explorer (IE 4+)
TrueType และ OpenType: รูปแบบดั้งเดิม (Safari 3.1+, FF 3.5+, Opera 10+)
WOFF: มาตรฐานใหม่สำหรับเว็บฟอนต์ (FF 3.6+, Chrome 5+)
SVG: IOS <4.2

ข้อมูลเพิ่มเติมที่กฎ @ Font-Face และเคล็ดลับแบบอักษรบนเว็บที่เป็นประโยชน์

บริการทั้งหมดนี้รองรับรูปแบบฟอนต์หลัก ๆ ด้วยฟอนต์ที่โฮสต์เองตราบใดที่คุณใช้ไวยากรณ์ที่ถูกต้องคุณควรจะครอบคลุม นี่คือการอัปเดตไวยากรณ์กันกระสุนปี 2011 จากFontSpring :

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
  }

ประสิทธิภาพ I: ดาวน์โหลด

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

บริการแบบชำระเงินเช่น Fonts.com, Typekit หรือ Typography.com ใช้วิธีการตรวจจับรูปแบบที่ถูกต้องแล้วส่งรูปแบบอักษรที่ถูกต้องซึ่งมักเป็นข้อมูล base64 ในไฟล์ CSS

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

ประสิทธิภาพ II: การตั้งค่าย่อย

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

Fonts.com : การควบคุมที่ละเอียดมาก
FontSpring : สามารถคอมไพล์ใหม่เป็นเซ็ตย่อยผ่านตัวสร้าง FontSquirrel webfont
FontSquirrel : สามารถคอมไพล์ใหม่เป็นเซ็ตย่อยผ่านตัวสร้างเว็บฟอนต์
Google : การควบคุมที่ละเอียดมาก
Typekit : ตัวเลือกที่ จำกัด ของ "อักขระทั้งหมด" หรือ "ค่าเริ่มต้น"
Typography.com : การควบคุมที่ละเอียดมาก

ประสิทธิภาพ III: การส่งมอบ

Fonts.com : Global CDN หรือเซิร์ฟเวอร์ของคุณเอง
FontSpring : ขึ้นอยู่กับเซิร์ฟเวอร์ของคุณ
FontSquirrel : ขึ้นอยู่กับเซิร์ฟเวอร์ของคุณ
Google : super-CDN ระดับโลก
Typekit : Global CDN
Typography.com : Global CDN (เซิร์ฟเวอร์ 125,000 เครื่อง)

รองรับภาษา

Fonts.com : 40 ภาษารวมทั้งเอเชียและตะวันออกกลาง
FontSpring : ตะวันตกขึ้นอยู่กับแบบอักษร
FontSquirrel : Western ขึ้นอยู่กับแบบอักษร
Google : ตะวันตกขึ้นอยู่กับแบบอักษร
Typekit : Western ขึ้นอยู่กับแบบอักษร
Typography.com : ตะวันตกขึ้นอยู่กับแบบอักษร

การทดสอบและการใช้งาน

Fonts.com : ง่ายมากด้วยเครื่องมือที่หลากหลายและปรับแต่งได้
FontSpring : เทคนิค (ทำเอง)
FontSquirrel : เทคนิค (ทำเอง)
Google : ง่าย
Typekit : ง่าย
Typography.com : การทดสอบที่ง่ายดายมีส่วนร่วมในการเปลี่ยนแปลงอีกเล็กน้อยเมื่อปรับใช้

Question 4

อย่างที่คุณเป็นอยู่

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

คำตอบคือ (เช่นเคยในการออกแบบเว็บ): ขึ้นอยู่กับ!

สิ่งหนึ่งที่แน่นอนคือฉันไม่แนะนำให้ใช้วิธี JS (แสดงในตัวอย่างที่สองของคุณ)

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

และอย่างที่คุณเห็นในตัวอย่างที่คุณระบุมี FOUC บางประเภท (flas of unstyled content) เนื่องจากเบราว์เซอร์แสดงผลหน้าเว็บก่อนที่จะมีแบบอักษร ทันทีที่เป็นเช่นนั้นหน้าจะถูกวาดใหม่ และยิ่งไซต์มีขนาดใหญ่ผลกระทบ (ประสิทธิภาพ) ก็ยิ่งมากขึ้น!

ดังนั้นฉันจะไม่ใช้โซลูชัน JS ใด ๆ ในการฝังฟอนต์

ตอนนี้เรามาดูวิธีการ CSS บริสุทธิ์
เรามีการพูดคุยเกี่ยวกับ "vs. @import" อยู่สักพักหนึ่ง โดยส่วนตัวแล้วฉันชอบที่จะหลีกเลี่ยงการใช้ @import และมักจะใช้<link>เท่านั้น แต่นี่เป็นคำถามเกี่ยวกับความชอบส่วนบุคคลเป็นหลัก สิ่งหนึ่งที่คุณไม่ควรทำอย่างยิ่งคือการผสมทั้งสองอย่าง!

Local กับ CDN
เมื่อตัดสินใจว่าจะโฮสต์ไฟล์แบบอักษรของคุณในเครื่องหรือใช้ CDN ดังนั้นส่วนใหญ่จะขึ้นอยู่กับจำนวนแบบอักษรที่แตกต่างกันและแบบอักษรตามลำดับที่คุณต้องการฝัง

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

แต่เนื่องจาก "ค่าใช้จ่าย" ที่เกิดจากการเข้ารหัส Base64 และขนาดของไฟล์ฟอนต์ (แม้จะอยู่ในรูปแบบ. woff) จึงควรใช้เทคนิคนี้หากคุณมีฟอนต์ไม่เกิน 3 หรือ 4 แบบ และตรวจสอบให้แน่ใจเสมอว่าเซิร์ฟเวอร์ของคุณส่งไฟล์ (CSS) gzip'ed

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

นอกเหนือจากข้อเท็จจริงที่ว่าผู้เขียนไม่ควรใช้แบบอักษรที่แตกต่างกันเกิน 3 หรือ 4 แบบบนไซต์ของเขาเรามาดูวิธีการใช้ CDN ของ Google กัน

ก่อนอื่นโปรดทราบว่าคุณสามารถ (และควรเสมอ) รวมแบบอักษรที่ต้องการทั้งหมดไว้ในหนึ่งเดียว<link>ดังนี้:

<link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic|PT+Sans:400,700,400italic,700italic|Montez' rel='stylesheet' type='text/css'>

ซึ่งจะส่งผลให้เกิดการตอบสนองดังต่อไปนี้:

@font-face {
  font-family: 'Montez';
  font-style: normal;
  font-weight: 400;
  src: local('Montez'), local('Montez-Regular'), url(http://themes.googleusercontent.com/static/fonts/montez/v4/Zfcl-OLECD6-4EcdWMp-Tw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/0XxGQsSc1g4rdRdjJKZrNBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: local('PT Sans Italic'), local('PTSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/PIPMHY90P7jtyjpXuZ2cLD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/lILlYDvubYemzYzN7GbLkHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  src: local('PT Serif'), local('PTSerif-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/sDRi4fY9bOiJUbgq53yZCfesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  src: local('PT Serif Bold'), local('PTSerif-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/QABk9IxT-LFTJ_dQzv7xpIbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  src: local('PT Serif Italic'), local('PTSerif-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/03aPdn7fFF3H6ngCgAlQzBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 700;
  src: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/Foydq9xJp--nfYIx2TBz9QFhaRv2pGgT5Kf0An0s4MM.woff) format('woff');
}

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

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

ดูบทความดีๆนี้สำหรับตัวอย่างและคำอธิบายวิธีการทำ!

Question 5

ฉันใช้เมธอด inline css เนื่องจากค่าใช้จ่ายของคำขอพิเศษมากกว่าการเพิ่มขนาดเมื่อเข้ารหัส bease64 นอกจากนี้ยังชดเชยเพิ่มเติมโดยการบีบอัด gizip โดยเซิร์ฟเวอร์ของไฟล์ css

ตัวเลือกอื่นคือใช้การโหลดแบบอักษรแบบอะซิงโครนัส แต่ผู้ใช้ส่วนใหญ่มักจะเห็นแบบอักษรโผล่ขึ้นมาหลังจากโหลด

ไม่ว่าจะใช้วิธีใดคุณสามารถลดขนาดของไฟล์ฟอนต์โดยรวมเฉพาะชุดอักขระที่คุณจะใช้เท่านั้น

Question 6

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

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

ฉันไม่รู้เกี่ยวกับ Typekit และอื่น ๆ แต่ด้วย Google Fonts คุณสามารถเลือกที่จะให้บริการชุดย่อยและช่วงของอักขระเฉพาะเพื่อเพิ่มความเร็วในการจัดส่งให้มากยิ่งขึ้น

การเลือกชุดย่อย:

<link href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin" rel="stylesheet">

การเลือกช่วงของอักขระ:

<!-- Only serve H,W,e,l,o,r and d -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=HelloWorld" rel="stylesheet">

คุณสามารถใช้dns-prefetchเพื่อปรับปรุงความเร็วให้ดียิ่งขึ้นด้วยการส่งแบบอักษร

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

เรื่องสั้นสั้น:

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

Question 7

ตัวเลือกที่ดีที่สุดคือการนำเข้าฟอนต์โดยใช้ ajax เช่นนี้:

<script>
    (function() {
        var font = document.createElement('link'); 
        font.type = 'text/css'; 
        font.rel = 'stylesheet';
        font.href = '/url/to/font.css';
        var s = document.getElementsByTagName('link')[0]; 
        s.parentNode.insertBefore(font, s);
      })();
</script>

ฉันทำสิ่งนี้บนหน้าเว็บของฉันและได้เพิ่ม 9 คะแนนในการทดสอบ Google Insights