ฉันจะฝัง Google Web Fonts ลงใน SVG ได้อย่างไร

ฉันกำลังเขียนบทความบนเว็บไซต์ของฉันเกี่ยวกับข้อดีของเทคโนโลยีเว็บใหม่ ๆ รวมถึง HTML5, CSS3 และ SVG ซึ่งเป็นข้อดีอย่างหนึ่งของความสามารถในการเลือกข้อความในภาพอย่างมีประสิทธิภาพ

ฉันยังใหม่กับ SVG และเพิ่งสร้างกราฟิกที่ดีของฉันใน Illustrator ฉันฝังมันลงในหน้าด้วยสคริปต์ GWF สำหรับแบบอักษร Ubuntu ในแท็ก ตามที่ปรากฎตัวอักษร Ubuntu จะแสดงอย่างถูกต้องในข้อความปกติ แต่สำหรับเคล็ดลับนี้ในการทำงานใน SVG สคริปต์ของ Google จะต้องถูกฝังอยู่ใน SVG ฉันจะทำสิ่งนี้ได้อย่างไร

คุณฝังแบบอักษรใน CSS โดยใช้การเข้ารหัส base64 คุณสามารถใช้สไตล์ในเอกสาร SVG คล้ายกับ CSS โดยใช้<style />องค์ประกอบ ดังนั้นถ้าคุณมีแบบอักษร WOFF คุณจะต้องฝังมันดังนี้:

<style>
@font-face {
    font-family: "Sample font";
    src: url("data:application/font-woff;charset=utf-8;base64,...");
}
</style>

...ข้อมูลตัวอักษรที่เข้ารหัส base64 อยู่ที่ไหน

คุณสามารถหาตัวอย่างของสิ่งนี้ได้โดยดูที่สไตล์ชีทของ Typekit ฉันไม่แน่ใจว่าประเภท mime ของfont/woffถูกต้องหรือไม่เพราะฉันเคยเห็นผู้คนอ้างว่าควรเป็นapplication/font-woffเช่นนั้น แม้ว่าfont/woff, font/truetype, font/opentypeฯลฯ ดูเหมือนจะเป็นที่นิยมมากขึ้น

หรืออีกทางหนึ่งคุณสามารถใช้แบบอักษรบนเว็บSVGและฝังเครื่องหมายคำอธิบายของแบบอักษร SVGไว้ในเอกสารของคุณ (แม้ว่าการสนับสนุนเบราว์เซอร์ยังมีข้อ จำกัด มากเช่นเดียวกับบันทึกของลุคในความคิดเห็น)

อย่างไรก็ตามคุณควรจะสามารถเชื่อมโยงไปยังแบบอักษรภายนอกตามข้อกำหนด SVGได้ นี่น่าจะเป็นทางออกที่ดีที่สุดถ้าคุณจะมีเอกสาร SVG หลายฉบับที่อ้างอิงแบบอักษรนั้น

<defs>ส่วนเช่น

<defs>
  <style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
</defs>

โรงงาน

คุณสามารถฝัง Google Web อักษรลงใน SVG ของคุณโดยตรงโดยใช้นาโน มันจะทำการสแกน SVG ของคุณโดยอัตโนมัติและเลือกฝังเฉพาะฟอนต์ที่ต้องการเพื่อให้แน่ใจว่าฟอนต์ Ubuntu ของคุณมีลักษณะเหมือนกันในเบราว์เซอร์สมัยใหม่ทั้งหมด ในกรณีของฉันฉันต้องการ Roboto ที่จะฝังใน SVG ของฉัน:

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

แก้ไข: ต่อไปนี้เป็นคำอธิบายโดยย่อเกี่ยวกับสิ่งที่เกิดขึ้นเบื้องหลัง:

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

นั่นเป็นเหตุผลที่เราสร้างนาโนและตรวจสอบให้แน่ใจว่าสแกน SVG โดยอัตโนมัติและแทรกเฉพาะแบบอักษรที่ใช้ ตัวอย่างเช่นหากไม่ใช้ตัวหนาหรือไม่มีข้อความจะไม่มีการฝังแบบอักษร สิ่งที่คุณต้องทำคือการลากและวาง SVG ของคุณลงในนาโนและใช้งานได้อย่างมีเสน่ห์! คุณสามารถเรียนรู้เพิ่มเติมได้ที่นี่: https://vecta.io/blog/making-svg-easier-to-use

สิ่งนี้อาจลดความซับซ้อนลง แต่คุณได้พิจารณาการดาวน์โหลดแบบอักษรเป็นไฟล์ zip จาก google แล้วปล่อยให้ Illustrator แปลงเป็นไฟล์ที่จำเป็นลงในไฟล์ SVG ของคุณหรือไม่?

นี่เป็นเพียงทฤษฎีเท่านั้นที่ฉันยังไม่ได้ลอง แต่ในทางทฤษฎีแล้วดูเหมือนจะใช้ได้

เพิ่ม<desc>แท็กต่อไปนี้หลังจาก

<defs>
<style type="text/css">@import url('http://fonts.googleapis.com/css?family=Lobster|Fontdiner+Swanky|Crafty+Girls|Pacifico|Satisfy|Gloria+Hallelujah|Bangers|Audiowide|Sacramento');</style>
</defs>

อัปเดตเป็นคำตอบของฉัน ตอนนี้ฉันต้องการคำตอบที่แตกต่างกันในหน้านี้ซึ่งใช้ Nano: https://graphicdesign.stackexchange.com/a/121950/45239

สมมติว่าคุณได้ดาวน์โหลดและติดตั้งเว็บฟอนต์ในระบบของคุณและได้สร้าง SVG (อาจใช้ขั้นตอนเดียวกับที่ฉันอธิบายด้านล่าง แต่ไม่ได้เลือก "แบบอักษร: แปลงเป็นโครงร่าง") คุณสามารถอัปโหลด SVG เป็นนาโน และดูตัวเลือก "ฝังแบบอักษร: ใช่" แล้วคลิกดาวน์โหลด

คำตอบก่อนหน้าของฉัน:

หากคุณยินดีเสียสละโดยมีข้อความที่เลือกได้และ SEO:

1. ดาวน์โหลดเว็บฟอนต์
2. ติดตั้งในเครื่อง
3. เปิดAdobe Illustrator
4. พิมพ์ข้อความของคุณ
5. ไฟล์> ส่งออก> ส่งออกเป็น ...
6. เลือก ".SVG"

7. เลือกการตั้งค่าเหล่านี้:

   • จัดแต่งทรงผม: สไตล์อินไลน์
   • ตัวอักษร: แปลงเป็นโครงร่าง
   • รูปภาพ: รักษา
   • รหัสวัตถุ: ชื่อเลเยอร์
   • ทศนิยม: 2
   • (เปิดใช้งาน) ลดขนาด
   • (เปิดใช้งาน) ตอบสนอง

8. อัปโหลด svg ที่เป็นทางเลือกไปที่https://vecta.io/nano (สามารถลดขนาดไฟล์ของฉันลงได้ 8.2%)