ฉันจะติดตั้งแบบอักษรที่กำหนดเองบนเว็บไซต์ HTML ได้อย่างไร

153

ฉันไม่ได้ใช้แฟลชหรือ PHP - และฉันถูกขอให้เพิ่มแบบอักษรที่กำหนดเองลงในเค้าโครง HTML แบบง่าย "KG June Bug"

ฉันดาวน์โหลดมันไว้ในเครื่อง - มีเคล็ดลับ CSS ง่าย ๆ ในการทำสิ่งนี้หรือไม่?

276

ใช่คุณสามารถใช้คุณสมบัติ CSS ชื่อ @ font-face มันได้รับการอนุมัติอย่างเป็นทางการใน CSS3 เท่านั้น แต่ได้รับการเสนอและใช้งานใน CSS2 และได้รับการสนับสนุนใน IE เป็นเวลานาน

คุณประกาศใน CSS ดังนี้:

 @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } 
 @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}

จากนั้นคุณสามารถอ้างอิงได้เช่นเดียวกับแบบอักษรมาตรฐานอื่น ๆ :

 h3 { font-family: Delicious, sans-serif; }

ดังนั้นในกรณีนี้

<html>
   <head>
    <style>
      @font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); } 
      h1 {
         font-family: JuneBug
      }
    </style>
   </head>
   <body>
      <h1>Hey, June</h1>
   </body>
</html>

และคุณเพียงแค่ใส่ JUNEBUG.TFF ในตำแหน่งเดียวกับไฟล์ html

ฉันดาวน์โหลดแบบอักษรจากเว็บไซต์dafont.com :

http://www.dafont.com/junebug.font

— Nicolas Modrzyk
แหล่งที่มา

1

ขอโทษถ้ามันเป็น "การบ้าน" โค้ดจะเป็นอย่างไรถ้าฉันใช้ฟอนต์ JUNEBUG นี้สำหรับข้อความธรรมดา

— ดัม

ฉันไม่รู้ว่าคุณสามารถทำได้ ใช้ได้กับเบราว์เซอร์อื่นหรือไม่

— Julien Bourdon

1

ทำงานในเบราว์เซอร์ที่ดีใด ๆ : webfonts.info/wiki/index.php?title=@font-face_browser_support

— นิโคลัส Modrzyk

ใช้งานไม่ได้สำหรับฉันแบบอักษรของฉันอยู่ในโฟลเดอร์เดียวกับหน้า php ของฉัน

— Black

1

@ เส้นทางสีดำที่ระบุในurlนั้นสัมพันธ์กับตำแหน่งที่ไฟล์cssของคุณอยู่ที่

— Alex Semeniuk

17

เพื่อรองรับเบราว์เซอร์ที่ดีที่สุดโค้ด CSS ของคุณควรมีลักษณะดังนี้:

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

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

สำหรับข้อมูลเพิ่มเติมโปรดดูบทความใช้ @ font-faceที่CSS-tricks.com

— John Slegers
แหล่งที่มา

17

คุณสามารถใช้ @ font-face ในเบราว์เซอร์ที่ทันสมัยที่สุด

นี่คือบทความเกี่ยวกับวิธีการทำงาน:

นี่คือไวยากรณ์ที่ดีสำหรับการเพิ่มแบบอักษรในแอปของคุณ:

http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

ต่อไปนี้เป็นสถานที่สองแห่งในการแปลงแบบอักษรสำหรับใช้กับ @ font-face:

cufon ยังสามารถใช้งานได้หากคุณไม่ต้องการใช้แบบอักษรและมีเอกสารประกอบที่ดีในเว็บไซต์:

http://cufon.shoqolate.com/generate/

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

9

ลองสิ่งนี้

@font-face {  
    src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket { 
    font-family:  Market Deco;
}

 <div class="FontMarket">KhonKaen Market</div>

ขยายตัวอย่างข้อมูล

vilis.org

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

4

หากคุณใช้สไตล์ชีตภายนอกรหัสอาจมีลักษณะดังนี้:

@font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
.junebug { font-family: Junebug; font-size: 4.2em; }

และควรบันทึกในไฟล์. css แยกต่างหาก (เช่น styles.css) หากไฟล์. css ของคุณอยู่ในตำแหน่งที่แยกต่างหากจากโค้ดเพจไฟล์ฟอนต์จริงควรมีพา ธ เหมือนกับไฟล์. css ไม่ใช่ไฟล์. html หรือ. php จากนั้นหน้าเว็บต้องการอะไร:

<link rel="stylesheet" href="css/styles.css">

ในส่วน <head> ของหน้า html ของคุณ ในตัวอย่างนี้ไฟล์ฟอนต์ควรอยู่ในโฟลเดอร์ css พร้อมกับสไตล์ชีท หลังจากนี้ให้เพิ่ม class = "junebug" ภายในแท็กใด ๆ ใน html ของคุณเพื่อใช้ตัวอักษร Junebug ในองค์ประกอบนั้น

หากคุณวาง css ในหน้าเว็บจริงให้เพิ่มแท็กสไตล์ในส่วนหัวของ html ที่ชอบ:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

และสไตล์อิลิเมนต์ที่แท้จริงสามารถรวมอยู่ในข้างบน<style>และเรียกว่าต่ออิลิเมนต์ตามคลาสหรือ id หรือคุณสามารถประกาศสไตล์อินไลน์กับอิลิเมนต์ โดยองค์ประกอบฉันหมายถึง <div>, <p>, <h1> หรือองค์ประกอบอื่น ๆ ภายใน html ที่จำเป็นต้องใช้แบบอักษร Junebug ด้วยตัวเลือกทั้งสองนี้ไฟล์แบบอักษร (Junebug.ttf) ควรอยู่ในพา ธ เดียวกับหน้า html ในสองตัวเลือกเหล่านี้แนวปฏิบัติที่ดีที่สุดจะมีลักษณะดังนี้:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
    .junebug { font-family: Junebug; font-size: 4.2em; }
</style>

และ

<h1 class="junebug">This is Junebug</h1>

และวิธีที่ยอมรับได้น้อยที่สุดคือ:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

และ

<h1 style="font-family: Junebug;">This is Junebug</h1>

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

— Richard Stitz
แหล่งที่มา

-1

มีวิธีง่าย ๆ ดังนี้: ในไฟล์ html เพิ่ม:

<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />

หมายเหตุ: คุณใส่ชื่อของไฟล์. ttf ที่คุณมี จากนั้นไปที่ไฟล์ css ของคุณแล้วเพิ่ม:

h1 {
    color: blue;
    font-family: vermin vibes;
}

หมายเหตุ: คุณใส่ชื่อตระกูลแบบอักษรของแบบอักษรที่คุณมี

หมายเหตุ: อย่าเขียนชื่อ font-family ของคุณเป็นชื่อตัวอย่าง font.ttf ของคุณ: หากชื่อ font.ttf ของคุณคือ: "vermin_vibes.ttf" ตระกูลแบบอักษรของคุณจะเป็น: ตระกูลแบบอักษร "vermin vibes" ไม่มีตัวอักษรพิเศษ เป็น "-, _" ... และอื่น ๆ สามารถมีช่องว่างได้เท่านั้น

— Abbass Sharara
แหล่งที่มา

คุณควรกำหนดเป็นfont-faceCSS จริงๆแทนที่จะต้องใช้ไฟล์ ttf

— Arcath

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

— Abbass Sharara

@Arcath ทำไมดีกว่าการใช้แบบอักษรหน้า?

— Antonio Araujo