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

518

มีวิธีเพิ่มแบบอักษรที่กำหนดเองบนเว็บไซต์โดยไม่ใช้รูปภาพแฟลชหรือกราฟิกอื่น ๆ หรือไม่

ตัวอย่างเช่นฉันทำงานในเว็บไซต์งานแต่งงานและฉันพบแบบอักษรที่ดีมากมายสำหรับหัวเรื่องนั้น แต่ฉันไม่พบวิธีที่ถูกต้องในการเพิ่มแบบอักษรนั้นบนเซิร์ฟเวอร์ และฉันจะรวมแบบอักษรนั้นกับ CSS ลงใน HTML ได้อย่างไร เป็นไปได้ไหมถ้าไม่มีกราฟิก?

— Vaske
แหล่งที่มา

18

ตั้งแต่มีการถามคำถามนี้ได้@font-faceรับการสนับสนุนอย่างกว้างขวางและแนะนำให้ใช้งานทั่วไป คุณต้องระวังว่า IE ต้องใช้แบบอักษรในรูปแบบที่แตกต่างจากเบราว์เซอร์อื่น ดูstackoverflow.com/questions/2219916/is-font-face-able-now

— David Johnstone

10

ตรวจสอบให้แน่ใจว่าคุณมีสิทธิ์ในการเผยแพร่แบบอักษร!

— เวียต

2

เยี่ยมชมtypekit.comหรือสำหรับfontsquirrel.com

— bjudson

1

stackoverflow.com/questions/8050640/…

— Adrien Be

3

www.fontsquirrel.com ดูเหมือนว่ายอดเยี่ยมในการสร้างไฟล์ฟอนต์ที่ต้องการ & สร้างรูปแบบ @fontface ที่เป็นสัญลักษณ์แสดงหัวข้อย่อยที่ดี (เช่นเดียวกับfontspring.com/blog/fixing-ie9-font-face-problems ที่แนะนำ)

— Adrien Be

500

สามารถทำได้ผ่าน CSS:

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

มันเป็นเรื่องที่ได้รับการสนับสนุนทั้งหมดของเบราว์เซอร์ปกติถ้าคุณใช้ TrueType-อักษร (TTF) หรือเว็บรูปแบบอักษรเปิด (WOFF)

— Hangy
แหล่งที่มา

13

ทั้ง Internet Explorer และ Firefox ไม่ได้ใช้ Webkit ดังนั้นมันจึงเป็นทางออกที่ไร้ประโยชน์ในความคิดของฉัน

— Casper

58

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

— E-satis

8

Firefox 3.1 รองรับ @ font-face ได้

— Ms2ger

2

@brendanjerwin: ลิงก์ของคุณอัพเดทแล้ว - brendanjerwin.com/development/web/2009/03/03/3

— แมตต์บอล

60

เฮ้พวกเดาอะไรนะ? ตอนนี้เกือบ 2016 แล้ว! ตอนนี้รองรับอย่างกว้างขวาง! เย้! ดีใจที่ฉันพบคำตอบนี้ปลายนี้ ฮ่าฮ่า

— ก้า

121

คุณสามารถเพิ่มแบบอักษรบางส่วนผ่านทางGoogle Web Fonts

ในทางเทคนิคแล้วแบบอักษรนั้นโฮสต์อยู่ที่ Google และคุณลิงก์ในส่วนหัวของ HTML จากนั้นคุณสามารถใช้พวกเขาได้อย่างอิสระใน CSS ด้วย@font-face( อ่านเกี่ยวกับเรื่องนี้ )

ตัวอย่างเช่น:

ใน<head>ส่วน:

 <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

จากนั้นใน CSS:

h1 { font-family: 'Droid Sans', arial, serif; }

ดูเหมือนว่าวิธีแก้ปัญหาจะค่อนข้างน่าเชื่อถือ (แม้Smashing Magazine จะใช้เป็นชื่อบทความ ) มี แต่แบบอักษรไม่ได้จำนวนมากดังนั้นเพื่อให้ห่างไกลในสารบบอักษร Google

— MichałPękała
แหล่งที่มา

1

ในเดือนกรกฎาคม 2014 Google ได้ขยายแบบอักษรและตัวอักษรรวม Google Noto ที่สนับสนุนภาษาส่วนใหญ่google.com/get/noto/# Abobe ได้สนับสนุนการริเริ่มฟอนต์แบบเปิดที่รองรับทุกภาษาblog.typekit.com/2014/07/15/introducing-source-han-sans

— vsingh

ดูเหมือนว่า (แบบอักษรบนเว็บของ Google) ไม่รองรับแบบอักษร. eot และ. woff และ. svg มันรองรับฟอนต์เวอร์ชัน. ttf เท่านั้น!

— Mahdi Jazini

77

วิธีที่จะไปคือการใช้การประกาศ @ font-face CSS ซึ่งช่วยให้ผู้เขียนสามารถระบุแบบอักษรออนไลน์เพื่อแสดงข้อความบนหน้าเว็บของพวกเขา ด้วยการอนุญาตให้ผู้แต่งจัดเตรียมฟอนต์ของตนเอง @ font-face ช่วยลดความจำเป็นในการพึ่งพาจำนวนฟอนต์ที่ผู้ใช้ติดตั้งบนคอมพิวเตอร์ของพวกเขา

ลองดูตารางต่อไปนี้:

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

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

Solutions:

1 - ความเข้ากันได้ของเบราว์เซอร์เต็มรูปแบบ

นี่คือวิธีการที่มีการสนับสนุนที่ลึกที่สุดที่เป็นไปได้ในขณะนี้

@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 */
}

2 - เบราว์เซอร์ส่วนใหญ่

แม้ว่าสิ่งต่าง ๆ จะขยับไปทาง WOFF อย่างหนักดังนั้นคุณอาจหนีไปกับ:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

3 - เฉพาะเบราว์เซอร์ล่าสุด

หรือแม้แต่แค่ WOFF
จากนั้นคุณใช้มันเช่นนี้:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

การอ้างอิงและการอ่านเพิ่มเติม:

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

— Javier Cadiz
แหล่งที่มา

2

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

— Jacob Stamm

สิ่งที่svgFontNameยืนหยัดเพื่อ? ฉันควรเปลี่ยนเป็นชื่อตระกูลแบบอักษรของฉันหรือไม่

— Gherman

17

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

@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}

ดังนั้นคุณจะต้องใช้ทั้งแบบอักษร ttf และ eot เครื่องมือบางอย่างที่พร้อมใช้งานออนไลน์สามารถทำการแปลงได้

แต่ถ้าคุณต้องการแนบฟอนต์ในรูปแบบที่ไม่ได้มาตรฐาน (บิตแมป ฯลฯ ) ฉันไม่สามารถช่วยคุณได้

— BiAiB
แหล่งที่มา

1

ตัวอย่างเครื่องมือออนไลน์: kirsle.net/wizards/ttf2eot.cgiตัวอย่างเครื่องมือออฟไลน์: code.google.com/p/ttf2eot/wiki/Demo - ควรใช้แบบอักษรWOFFด้วย

— วิลฟ์

11

ฉันพบว่าวิธีที่ง่ายที่สุดในการมีแบบอักษรที่ไม่เป็นมาตรฐานในเว็บไซต์คือการใช้sIFR

มันเกี่ยวข้องกับการใช้วัตถุ Flash ที่มีแบบอักษร แต่มันลดระดับลงอย่างเป็นข้อความ / แบบอักษรมาตรฐานหากไม่ได้ติดตั้ง Flash

สไตล์นี้ตั้งอยู่ใน CSS ของคุณและ JavaScript ตั้งค่าแฟลชแทนข้อความของคุณ

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

— ด้าน
แหล่งที่มา

24

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

— E-satis

2

@ e-พอใจ: เป็นอย่างไร โดยส่วนตัวฉันไม่เคยสังเกตเห็นความแตกต่างระหว่างหน้าเว็บที่ใช้ sIFR และหน้าเว็บที่ไม่ได้ทำนอกเหนือจากความแตกต่างในการแสดงข้อความที่ละเอียดอ่อน ฉันคิดว่ามันเป็นความคิดที่ดีจริง ๆ แล้วถึงแม้ว่า@font-faceจะสนับสนุนได้ดีกว่ามาก

— Sasha Chedygov

"แก้ไข: (ฉันยังคงแนะนำให้ใช้รูปภาพสำหรับแบบอักษรที่ไม่ได้มาตรฐานเนื่องจาก sIFR เพิ่มเวลาให้กับโครงการและอาจต้องบำรุงรักษา)" พูดได้เป็นอย่างดี. sIFR เป็นเทคนิคที่เจ๋งจริง ๆ แต่ดูเหมือนว่ามันจะต้องมีอะไรมากมาย หากคุณมีเวลาที่จะเรียนรู้และฝึกฝนเทคนิคนี้ฉันขอแนะนำ แต่ถ้าคุณกำลังมองหาเทคนิคอักษรทดแทนที่ง่ายและรวดเร็วฉันต้องการใช้เปลี่ยนภาพหรือแม้กระทั่ง @ คุณสมบัติ font-face แบบ CSS

— ดีเร็คแดร์

10

บทความFont-face ใน IE: การทำให้ Web Fonts Workบอกว่าใช้งานได้กับเบราว์เซอร์หลักทั้งสาม

นี่คือตัวอย่างที่ฉันทำงาน: http://brendanjerwin.com/test_font.html

การอภิปรายอยู่ในการฝังแบบอักษร

— brendanjerwin
แหล่งที่มา

10

Typeface.jsและCufonเป็นอีกสองตัวเลือกที่น่าสนใจ พวกเขาเป็นองค์ประกอบ JavaScript ที่แสดงข้อมูลตัวอักษรพิเศษในรูปแบบ JSON (ซึ่งคุณสามารถแปลงจากรูปแบบTrueTypeหรือOpenTypeบนเว็บไซต์ของพวกเขา) ผ่านองค์ประกอบ <canvas> ใหม่ในเบราว์เซอร์ใหม่ทั้งหมดยกเว้น Internet Explorer และผ่านVMLใน Internet Explorer

ปัญหาหลักของทั้งสอง (ณ ตอนนี้) คือการเลือกข้อความไม่ทำงานหรืออย่างน้อยก็ทำงานได้ค่อนข้างเชื่องช้า

ถึงกระนั้นมันก็ดีมากสำหรับหัวข้อข่าว เนื้อความ ... ฉันไม่รู้

และมันก็เร็วอย่างน่าประหลาดใจ

— โทมัส
แหล่งที่มา

อีกตัวเลือกที่น่าสนใจคือ typekit.com แนวคิดที่คล้ายกัน

— Zack

8

หรือคุณอาจจะลองsIFR ฉันรู้ว่ามันใช้แฟลช แต่ถ้ามี หาก Flash ไม่พร้อมใช้งานแสดงข้อความต้นฉบับในแบบอักษรดั้งเดิม (CSS)

— แคสเปอร์
แหล่งที่มา

4

เทคนิคที่ W3C ได้แนะนำสำหรับการทำเช่นนี้จะเรียกว่า "ฝัง" และมีการอธิบายอย่างดีจากสามบทความที่นี่: ฝังแบบอักษร ในการทดลองที่ จำกัด ของฉันฉันพบข้อผิดพลาดของกระบวนการนี้และประสบความสำเร็จอย่าง จำกัด ในการทำให้ทำงานในสภาพแวดล้อมแบบหลายเบราว์เซอร์

— Steve Moyer
แหล่งที่มา

4

ทั้ง Safari และ Internet Explorer รองรับ CSS-font-face rule อย่างไรก็ตามมันรองรับทั้ง font แบบฝังต่างกันสองแบบ Firefox กำลังวางแผนที่จะรองรับชนิดเดียวกันกับ Apple ในไม่ช้า SVG สามารถฝังแบบอักษร แต่ยังไม่รองรับอย่างกว้างขวาง (ไม่มีปลั๊กอิน)

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

— zobier
แหล่งที่มา

สิ่งนี้ไม่จำเป็นต้องทำด้วย JavaScript ฉันรู้ว่าผู้คนจำนวนมากชอบที่จะใช้ JavaScript สำหรับบางสิ่งบางอย่างในปัจจุบัน แต่เทคนิค CSS มาตรฐานอาจเหมาะสมกว่าที่นี่ ดูsitepoint.com/article/header-images-css-xhtml

— hangy

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

— zobier

4

หากคุณใช้ ASP.NET การสร้างฟอนต์ที่ใช้อิมเมจโดยง่ายโดยไม่ต้องติดตั้งฟอนต์ (เช่นในการเพิ่มฟอนต์ฐานฟอนต์) บนเซิร์ฟเวอร์โดยใช้:

PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];

Graphicsแล้ววาดด้วยตัวอักษรลงบนว่า

— mattlant
แหล่งที่มา

1

ใช่แล้ว ... และคุณสามารถลืมเกี่ยวกับการคัดลอกและการวางได้ และซูมด้วยเบราว์เซอร์เก่า ฉันไม่ได้พูดถึงปัญหาแบนด์วิดธ์!

— E-satis

2

ใช่แล้วคำถามที่ระบุว่ามันจะถูกใช้สำหรับข้อความเนื้อหา? ไม่มันไม่ได้เป็นคำถามทั่วไปและนี่เป็นคำตอบทั่วไป ตัวอย่างข้อความขนาดเล็กส่วนหัว ฯลฯ ไม่ต้องใช้แบนด์วิดท์จำนวนมาก Sheesh รับกำ!

— mattlant

3

ดูเหมือนว่าจะใช้งานได้ใน Internet Explorer เท่านั้น แต่การค้นหาโดย Google อย่างรวดเร็วสำหรับ "html ฝังแบบอักษร" ให้ผลตอบแทนที่http://www.spoono.com/html/tutorials/tutorial.php?id=19

ถ้าคุณต้องการพักฐานผู้ไม่เชื่อเรื่องพระเจ้า (และคุณควร!) คุณจะต้องใช้รูปภาพหรืออื่น ๆ เพียงแค่ใช้แบบอักษรมาตรฐาน

— James Muscat
แหล่งที่มา

3

ฉันทำการวิจัยเล็กน้อยและขุดขึ้นมาแทนที่ข้อความแบบไดนามิก (เผยแพร่ 2004-06-15)

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

มีข้อ จำกัด บางอย่าง แต่อาจเป็นหนึ่งในตัวเลือกที่ง่ายกว่า (และรองรับเบราว์เซอร์เพิ่มเติม) กว่าที่เหลือทั้งหมดที่ฉันเคยเห็น

— Kent Fredric
แหล่งที่มา

3

นอกจากนี้ยังเป็นไปได้ที่จะใช้แบบอักษร WOFF - ตัวอย่างที่นี่

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }

— วิลฟ์
แหล่งที่มา

3

เพียงแค่ให้ลิงค์ไปยังตัวอักษรจริงเช่นนี้และคุณจะไปดี

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat'   rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>

<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>


</body>
</html>

— Abhijeet Kumar
แหล่งที่มา

ทางเลือกง่าย ๆ ที่ดี และคุณแน่ใจว่าจะมีสิทธิ์ใช้งาน ดูdevelopers.google.com/fonts/docs/getting_started

— Tim Erickson

2

Typeface.js วิธี JavaScript:

ด้วย typeface.js คุณสามารถฝังแบบอักษรที่กำหนดเองในหน้าเว็บของคุณเพื่อให้คุณไม่ต้องแสดงข้อความเป็นรูปภาพ

แทนที่จะสร้างภาพหรือใช้แฟลชเพียงเพื่อแสดงข้อความกราฟิกของไซต์ของคุณในแบบอักษรที่คุณต้องการคุณสามารถใช้ typeface.js และเขียนด้วย HTML และ CSS ธรรมดาราวกับว่าผู้เยี่ยมชมของคุณติดตั้งแบบอักษรไว้ในเครื่อง

http://typeface.neocracy.org/

— Bakkal
แหล่งที่มา

2

ดูบทความ50 เครื่องมือออกแบบที่มีประโยชน์สำหรับการทำตัวพิมพ์เว็บที่สวยงามสำหรับวิธีการอื่น

ฉันใช้Cufonเท่านั้น ฉันพบว่ามันน่าเชื่อถือและใช้งานง่ายมากดังนั้นฉันจึงติดมัน

— แบลร์
แหล่งที่มา

2

หากคุณมีไฟล์แบบอักษรของคุณคุณจะต้องเพิ่มรูปแบบอักษรเพิ่มเติมสำหรับเบราว์เซอร์อื่น ๆ

เพื่อจุดประสงค์นี้ฉันใช้ตัวสร้างฟอนต์เช่นFontsquirrelซึ่งมีรูปแบบตัวอักษรทั้งหมดและ @ font-face CSS คุณจะต้องลากและวางลงในไฟล์ CSS ของคุณเท่านั้น

— saadeez
แหล่งที่มา