ใช้แบบอักษรที่กำหนดเองโดยใช้ CSS?

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

และรองรับเบราว์เซอร์จำนวนมาก

เราจะทำอย่างนั้นได้อย่างไร? ในขณะเดียวกันก็ป้องกันไม่ให้ผู้ใช้สามารถดาวน์โหลดแบบอักษรได้ฟรีหากเป็นไปได้

โดยทั่วไปคุณสามารถใช้แบบอักษรที่กำหนดเองโดยใช้@font-faceใน CSS ของคุณ นี่เป็นตัวอย่างพื้นฐานมาก:

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}

จากนั้นจะใช้ฟอนต์กับองค์ประกอบเฉพาะ:

.classname {
    font-family: 'YourFontName';
}

( .classnameเป็นตัวเลือกของคุณ)

โปรดทราบว่ารูปแบบแบบอักษรบางอย่างอาจไม่ทำงานในเบราว์เซอร์ทั้งหมด คุณสามารถใช้เครื่องมือสร้าง fontsquirrel.comเพื่อหลีกเลี่ยงความพยายามแปลงมากเกินไป

คุณสามารถค้นหาแบบอักษรบนเว็บฟรีที่จัดทำโดยGoogle Fonts (มี@font-faceกฎCSS ที่สร้างขึ้นอัตโนมัติโดยอัตโนมัติดังนั้นคุณไม่ต้องเขียนเอง)

ในขณะเดียวกันก็ป้องกันไม่ให้ผู้อื่นเข้าถึงตัวอักษรได้ฟรีหากเป็นไปได้

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

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

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

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

ที่นำมาจากที่นี่

คุณต้องดาวน์โหลดไฟล์แบบอักษรและโหลดใน CSS ของคุณ

ฉันกำลังใช้ฟอนต์ Yanone Kaffeesatzในเว็บแอปพลิเคชันของฉัน

ฉันโหลดและใช้งานผ่าน

@font-face {
    font-family: "Yanone Kaffeesatz";
    src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}

ในสไตล์ชีทของฉัน

วันนี้มีรูปแบบตัวอักษรคอนเทนเนอร์สี่แบบที่ใช้บนเว็บ: EOT, TTF, WOFF,และWOFF2.

น่าเสียดายที่แม้จะมีตัวเลือกที่หลากหลาย แต่ไม่มีรูปแบบสากลเดียวที่ใช้ได้กับเบราว์เซอร์เก่าและใหม่ทั้งหมด:

• EOTเป็น IE เท่านั้น
• TTFรองรับ IE บางส่วน
• WOFF ได้รับการสนับสนุนที่หลากหลาย แต่ไม่มีให้ในเบราว์เซอร์รุ่นเก่า
• การสนับสนุนWOFF 2.0 เป็นงานที่อยู่ระหว่างดำเนินการสำหรับเบราว์เซอร์จำนวนมาก

หากคุณต้องการให้เว็บแอปของคุณมีแบบอักษรเหมือนกันในทุกเบราว์เซอร์คุณอาจต้องการให้แบบอักษรทั้ง 4 แบบใน CSS

 @font-face {
      font-family: 'besom'; !important
      src: url('fonts/besom/besom.eot');
      src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
           url('fonts/besom/besom.woff2') format('woff2'),
           url('fonts/besom/besom.woff') format('woff'),
           url('fonts/besom/besom.ttf') format('truetype'),
           url('fonts/besom/besom.svg#besom_2regular') format('svg');
      font-weight: normal;
      font-style: normal;
  }

หากคุณไม่พบแบบอักษรใด ๆ ที่คุณชอบจาก Google.com/webfonts หรือ fontsquirrel.com คุณสามารถสร้างแบบอักษรบนเว็บของคุณเองด้วยตัวอักษรที่คุณทำ

นี่คือแบบฝึกหัดที่ดี: สร้างชุดตัวอักษรสำหรับเว็บแบบอักษรสำหรับใบหน้าของคุณเอง

แม้ว่าฉันไม่แน่ใจเกี่ยวกับการป้องกันไม่ให้บางคนดาวน์โหลดแบบอักษรของคุณ

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

นอกจากนี้ยังมีเครื่องมือที่น่าสนใจเรียกว่าCufon มีการสาธิตวิธีการใช้งานในบล็อกนี้ มันง่ายและน่าสนใจจริงๆ นอกจากนี้ยังไม่อนุญาตให้ผู้อื่น ctrl + c / ctrl + v เนื้อหาที่สร้างขึ้น

ฉันกำลังทำงานกับ Win 8 ใช้รหัสนี้ มันใช้งานได้กับ IE และ FF, Opera และอื่น ๆ สิ่งที่ฉันเข้าใจคือ: ตัวอักษร woff เป็นสีอ่อน ๆ และใช้กันทั่วไปในแบบอักษรของ Google

ไปที่นี่การแปลงตัวอักษร TTF ของคุณเพื่อ WOFF ก่อน

@font-face
{
    font-family:'Open Sans';
    src:url('OpenSans-Regular.woff');
}

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

แต่ถ้าคุณต้องการใช้แบบอักษรในเว็บไซต์ของคุณอ่านสิ่งนี้: มีวิธีที่ง่ายและฟรีในการใช้แบบอักษรในเว็บไซต์ของคุณ ฉันอยากจะแนะนำแบบอักษรของ Google เพราะมันฟรีและใช้งานง่าย ตัวอย่างเช่นฉันจะใช้แบบอักษร Bangers จาก Google ( https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers ) นี่คือลักษณะที่ปรากฏ: HTML

<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>

CSS

body {
font-family: 'Bangers', cursive;
}