การใช้ฟอนต์. otf บนเว็บเบราว์เซอร์

ฉันกำลังทำงานบนเว็บไซต์ที่ต้องใช้การทดสอบแบบอักษรออนไลน์แบบอักษรทั้งหมดที่ฉันมีคือ. otf

มีวิธีฝังแบบอักษรและทำให้พวกเขาทำงานกับเบราว์เซอร์ทั้งหมดหรือไม่

ถ้าไม่มีฉันมีทางเลือกอื่นอีกบ้าง?

คุณสามารถใช้OTFแบบอักษรโดยใช้ @ font-face เช่น:

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWeb.otf") format("opentype");
}

@font-face {
    font-family: GraublauWeb;
    font-weight: bold;
    src: url("path/GraublauWebBold.otf") format("opentype");
}

อย่างไรก็ตามหากคุณต้องการรองรับเบราว์เซอร์สมัยใหม่ที่หลากหลายฉันขอแนะนำให้คุณเปลี่ยนไปใช้WOFFและTTFประเภทของตัวอักษร WOFFประเภทถูกนำไปใช้โดยเบราว์เซอร์เดสก์ท็อปหลัก ๆ ทุกTTFประเภทในขณะที่ประเภทนั้นเป็นทางเลือกสำหรับเบราว์เซอร์ Safari, Android และ iOS รุ่นเก่า หากแบบอักษรของคุณเป็นแบบอักษรฟรีคุณสามารถแปลงแบบอักษรของคุณโดยใช้ตัวอย่างเช่นตัวแปลงออนไลน์

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf")  format("truetype");
}

หากคุณต้องการสนับสนุนเกือบทุกเบราว์เซอร์ที่ยังคงอยู่ที่นั่น (ไม่จำเป็นอีกต่อไป IMHO) คุณควรเพิ่มประเภทตัวอักษรเพิ่มเติมเช่น:

@font-face {
    font-family: GraublauWeb;
    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 */
}

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

การสนับสนุนเบราว์เซอร์ @ font-face

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

สนับสนุนเบราว์เซอร์ WOFF

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

การสนับสนุนเบราว์เซอร์ SVG-Fonts

หวังว่านี่จะช่วยได้

จากตัวอย่างไดเรกทอรี Google Font :

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype');
}
body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
}

มันทำงานข้ามเบราว์เซอร์ด้วย. ttf ฉันเชื่อว่ามันอาจทำงานกับ. otf ( Wikipediaบอกว่า. otf ส่วนใหญ่ใช้งานได้กับ. ttf ย้อนหลัง) หากไม่ใช่คุณสามารถแปลง. otf เป็น. ttf

นี่คือบางเว็บไซต์ที่ดี:

• ไพรเมอร์ที่ดี:

  http://www.alistapart.com/articles/cssatten

• ข้อมูลอื่น ๆ :

  http://randsco.com/index.php/2009/07/04/p680