web fonts repository

พื้นที่เก็บข้อมูลแบบอักษรเว็บ

Webfont Hosting ง่ายๆที่ได้รับแรงบันดาลใจจาก Google Fonts มันทำงานบนเซิร์ฟเวอร์ของคุณจัดเก็บและกระจายไฟล์เว็บฟอนท์และสร้าง CSS on-the-go สำหรับการฝังตัวอักษรบนหน้าเว็บ

เริ่มต้นอย่างรวดเร็ว

ความต้องการ

1. เซิร์ฟเวอร์ HTTP รองรับ PHP ≥ 7.0
2. นักแต่งเพลง (จำเป็นสำหรับการติดตั้ง)

การติดตั้ง

1. ดาวน์โหลดซอร์สโค้ด

เรียกใช้รหัสต่อไปนี้ในคอนโซล:

composer create-project finesse/web-fonts-repository webfonts

ในกรณีที่ webfonts เป็นเส้นทางไปยังไดเรกทอรีที่ควรติดตั้งที่เก็บ

หรือคุณสามารถทำบางสิ่งด้วยตนเอง:

1. ดาวน์โหลดซอร์สโค้ดจาก GitHub และแยกออก
2. เปิดเทอร์มินัลและไปที่รูทซอร์สโค้ด
3. ติดตั้งไลบรารีโดยทำงานในเทอร์มินัล:

   composer install

4. เตรียมที่เก็บโดยใช้ในเทอร์มินัล:

   composer run-script post-create-project-cmd

2. การอนุญาตไฟล์

ให้ผู้ใช้ในนามซึ่งเว็บเซิร์ฟเวอร์เรียกใช้สิทธิ์ในการเขียนภายในไดเรกทอรี logs

คุณสามารถเรียกใช้สิ่งนี้ในคอนโซล:

 # Don't do it in production!
chmod 777 logs

3. เว็บเซิร์ฟเวอร์

ทำให้ไดเรกทอรี public เป็นรูทเอกสารของเว็บเซิร์ฟเวอร์ หรือเพียงแค่เปิด http: // localhost/สาธารณะถ้าคุณติดตั้งที่เก็บลงในรูทเว็บเซิร์ฟเวอร์

ทำให้การร้องขอทั้งหมดไปยังไฟล์ที่ไม่มีอยู่จริงได้รับการจัดการโดย public/index.php หากเซิร์ฟเวอร์ของคุณเป็น Apache ก็เสร็จแล้ว

ทำให้เซิร์ฟเวอร์เพิ่ม Access-Control-Allow-Origin: * HTTP-Header ลงในไฟล์ FONT มิฉะนั้นเบราว์เซอร์บางตัวจะปฏิเสธการใช้แบบอักษรจากที่เก็บ

• Apache: สิ่งที่คุณต้องทำคือตรวจสอบให้แน่ใจว่าโมดูล mod_header.c เปิดอยู่ (เรียกใช้คำสั่ง a2enmod headers และรีสตาร์ทเซิร์ฟเวอร์เพื่อเปิดใช้งาน)
• Nginx: ใช้คำสั่งนี้

การตั้งค่า

ใส่ไฟล์ตัวอักษรของคุณ (WOFF, WOFF2, TTF, OTF, EOT, SVG) ไปยังไดเรกทอรี public/fonts คุณสามารถแยกออกจากไดเรกทอรีย่อย คุณสามารถแปลงไฟล์ WebFont โดยใช้ TransFonter

การตั้งค่าทั้งหมดไปที่ไฟล์ config/settings-local.php หากคุณไม่มีให้คัดลอกจากไฟล์ config/settings-local.php.example

พารามิเตอร์:

displayErrorDetails

รายละเอียดข้อผิดพลาดควรส่งไปยังเบราว์เซอร์หรือไม่ อย่างไรก็ตามข้อผิดพลาดจะถูกเขียนลงใน logs/app.log คุณควรปิดบนเซิร์ฟเวอร์การผลิต

logger / level

ควรบันทึกข้อความไปยังไฟล์กี่ข้อความ ค่าเป็นหนึ่งในค่าคงที่ PsrLogLogLevel คุณสามารถอ่านเพิ่มเติมเกี่ยวกับระดับบันทึกได้ที่นี่

fonts

รายการของแบบอักษรที่มีอยู่ในที่เก็บ ตัวอย่างง่ายๆ:

 return [
    // ...
    ' fonts ' => [
        ' Open Sans ' => [
            ' styles ' => [
                ' 300 ' => ' OpenSans/opensans-light.* ' ,
                ' 300i ' => ' OpenSans/opensans-light-italic.* ' ,
                ' 400 ' => ' OpenSans/opensans-regular.* ' ,
                ' 400i ' => ' OpenSans/opensans-regular-italic.* ' ,
            ]
        ],
        ' Roboto ' => [
            ' styles ' => [
                ' 300 ' => ' Roboto/roboto-light.* ' ,
                ' 400 ' => ' Roboto/roboto-regular.* ' ,
                ' 500 ' => ' Roboto/roboto-medium.* ' ,
                ' 700 ' => ' Roboto/roboto-bold.* ' ,
            ]
        ]
    ]
];

คีย์อาร์เรย์ fonts เป็นชื่อตระกูลตัวอักษร คีย์ styles อาร์เรย์คือชื่อสไตล์ ตัวเลขในชื่อสไตล์คือน้ำหนักตัวอักษร i ย่อมาจากตัวเอียง

พา ธ ไฟล์แบบอักษรจะได้รับเทียบกับไดเรกทอรี public/fonts พา ธ ไฟล์เป็นรูปแบบการค้นหาลูกโลก หมายความว่าที่เก็บควรพิจารณาไฟล์ทั้งหมดที่ตรงกับรูปแบบเป็นไฟล์ตัวอักษร

คุณสามารถค้นหาตัวอย่างและความเป็นไปได้เพิ่มเติมที่นี่

การใช้งาน

เพิ่มแท็ก <link> ไปยังรหัส HTML ของหน้าเว็บที่คุณต้องการฝังตัวอักษร:

 < link rel =" stylesheet " href =" http://web-fonts-repository.local/css?family=Open+Sans:400,400i,700,700i|Roboto:300,400 " />

โดยที่ http://web-fonts-repository.local เป็น URL รูทของที่เก็บฟอนต์เว็บที่ติดตั้ง

แบบอักษรที่ต้องการจะถูกระบุในลักษณะเดียวกับบน Google Fonts ครอบครัวฟอนต์แบ่งออกเป็น | , สไตล์ครอบครัวถูกแบ่งโดย , ชื่อสกุลถูกแยกออกจากรายการสไตล์โดยใช้ :

คุณสามารถละเว้นรายการสไตล์ ในกรณีนี้ใช้สไตล์ปกติ ( 400 )

 < link rel =" stylesheet " href =" http://web-fonts-repository.local/css?family=Open+Sans " />

คุณสามารถระบุค่าสำหรับคุณสมบัติสไตล์ฟอนต์-แสดงโดยใช้พารามิเตอร์ display ตัวอย่าง:

 < link rel =" stylesheet " href =" http://web-fonts-repository.local/css?family=Open+Sans&display=swap " />

จากนั้นฝังตัวอักษรในรหัส CSS:

 body {
    font-family : 'Open Sans' , sans-serif;
}

ความเข้ากันได้ของรุ่น

โครงการตามเวอร์ชันความหมาย

หมายความว่าเวอร์ชันแพตช์เข้ากันได้อย่างสมบูรณ์ (เช่น 1.2.1 และ 1.2.2) รุ่นรองนั้นเข้ากันได้กับย้อนหลัง (เช่น 1.2.1 และ 1.3.2) และรุ่นหลักไม่เข้ากันได้ (เช่น 1.2.1 และ 3.0) รุ่นก่อนรีลีส (0.*) แตกต่างกันเล็กน้อย: เวอร์ชันแพตช์นั้นเข้ากันได้ย้อนหลังและรุ่นรองไม่เข้ากันได้

ใบอนุญาต

MIT ดูไฟล์ใบอนุญาตสำหรับรายละเอียด