Tag: font

  • แก้ปัญหาการเรียกใช้ font ผ่าน css แล้วเกิด error Access to font at has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

    เนื่องด้วยทางทีมงานต้องการใช้ font ผ่าน css ที่อยู่คนละที่ โดยต้องการให้ไปเรียกที่เดียวเพื่อการจัดการง่าย แต่ปัญหาก็เกิดขึ้น เพราะทางต้นทางมีการ block ไม่ให้เข้าถึง วันนี้จึงมีแนวทางการแก้ปัญหาดังนี้

    ขั้นตอนที่ 1 ไปตั้งค่าไฟล์ font ที่ต้องการ โดยในที่นี้ เป็น folder fonts โดยไปที่ IIS เลือก folder ที่ต้องการ จากนั้นเลือกเมนู “HTTP Response Headers” จากนั้น กด “Add” ดังรูป

    ขั้นตอนที่ 2 เพิ่ม Name: Access-Control-Allow-Origin และ Value: * ดังรูป

    ขั้นตอนที่ 3 ผลลัพธ์จากการเพิ่ม Name: Access-Control-Allow-Origin และ Value: * ดังรูป

    ขั้นตอนที่ 4 เพิ่ม Name: Access-Control-Allow-Origin และ Value: * ที่ไฟล์ font.css ด้วยเหมือนกัน

    ขั้นตอนที่ 5 ปรับแก้การเรียกใช้ css โดยใช้ SRI Hash Generator ผ่าน SRI Hash Generator

    ขั้นตอนที่ 6 เวบไซต์ปลายทางก็จะสามารถเรียกใช้ font จาก เวบไซต์ต้นทาง ดังรูป

    หวังว่าจะเป็นประโยชน์ให้กับคนที่มีปัญหาแบบเดียวกันนี้นะคะ

    ที่มา

  • งานกราฟฟิกฟรี ถูกลิขสิทธิ์มีอยู่จริง

    ปัจจุบันงานกราฟฟิกได้เข้ามามีบทบาทมากมายในด้านการโฆษณา การขาย การออกแบบและดีไซน์ผลงานต่างๆ รวมถึงการนำมาใช้พัฒนาระบบ หรือ แอพพลิเคชันต่างๆมากมายโดยมาจากการใช้ชุดอักขระ (Font) หรือรูปภาพ Vector ต่างๆมาเป็นส่วนประกอบ เราจะเห็นได้ว่าส่วนใหญ่แล้วเป็นงานลิขสิทธิ์ทั้งสิ้น การที่จะนำมาใช้งานได้ต้องมีการซื้อ License การใช้งานหรือการขออนุญาตจากเจ้าของผลงานก่อน

    จะทำยังไงหละถ้าเราอยากใช้งานแบบถูกลิขสิทธิ์แถมไม่ต้องจ่ายเงินสักบาท

    เว็ปไซต์ Creative Market https://creativemarket.com/ เป็นอีกหนึ่งเว็ปไซต์ที่รวบรวมงานศิลปะ, งานกราฟฟิก Vector, Font, Template สำหรับงานออกแบบ, Template สำหรับการสร้างเว็ปไซต์, รูปถ่าย หรือจะเป็น Brush หัวพู่กันในโปรแกรมต่างๆ มารวมไว้เป็น Market ของนักออกแบบหลายๆคนรวมอยู่ในเว็ปไซต์ เราสามารถเข้าไปกดซื้อ แล้วนำมาใช้งานได้เลย สะดวกรวดเร็ว เชื่อถือได้

    แต่ แต่ แต่ ไหนบอกว่าฟรีหละ

    ทาง Creative Market ได้มีการทำระบบ Free Goods of the Week https://creativemarket.com/free-goods ซึ่งจะนำงานกราฟฟิกต่างๆในระบบแจกฟรีๆ สัปดาห์ละ 6 รายการ โดยการเข้าไปที่เมนู Get Inspired แล้วเลือก Free Goods (ที่ไม่ได้แปลว่าถูกดีนะ แต่แปลว่า สินค้าฟรีนั้นเองครับ) ให้เราทำการ Sign Up สมาชิกกับทางระบบก่อน เพื่อที่จะใช้ในการเก็บสินค้าที่แจกฟรีเข้าไปไว้ใน Account ของเราเอง สามารถกลับมาโหลดไปใช้งานได้ในอนาคตครับ

    เมื่อเราเข้ามาในหน้า Free Goods แล้วก็จะมีในส่วนของ เวลาที่นับถอยหลัง ตรงนี้คือเวลาที่จะแจกสินค้า จะเริ่มนับจากต้นสัปดาห์ เราต้องเข้ามากด Free Download ให้ทันก่อนเวลาจะหมดเพื่อที่จะเก็บเข้า Account ของเรา ถัดมาจะเป็นหลอด Progress bar ถ้าเราซื้อครบ 15$ เราจะสามารถ Download สินค้าฟรีที่เป็น Extra ของสัปดาห์นั้นได้ และสุดท้ายคือรายการสินค้าที่แจกฟรี ซึ่งเราสามารถกด Sync to Dropbox ก็ได้ถ้ามีการเชื่อมต่อเอาไว้ หรือจะกด Free Download เพื่อดาวน์โหลดมาเก็บไว้ก็ได้

    เพียงเท่านี้เราก็จะได้งานกราฟฟิกต่างๆมาแบบฟรีๆ มีลิขสิทธิ์โดยการเข้ามากดรับสินค้าทุกๆสัปดาห์ สะสมไว้เรื่อยๆ นำมาใช้ได้ในทุกๆโอกาส ทั้งนี้ทั้งนั้น การนำมาใช้ในเชิงพาณิชย์ กรุณาอ่านและศึกษา License เพิ่มเติมจากหน้ารายละเอียดสินค้าเนื่องจากบางครั้งก็ให้ License แบบ Personal Use ไม่ใช่ Commercial จะได้ไม่โดนฟ้องจากเจ้าของผลงานนะครับ

    กด Download แล้ว ไปตรวจสอบได้จากที่ไหนหละ ว่าสินค้านั้นเข้าตัวเราแล้ว

    ให้เราไปที่มุมขวา จะมีรูปโปรไฟล์ของท่านอยู่ ให้ทำการ Hover ไว้ จะมีเมนูโผล่ขึ้นมาแล้วเลือกเมนู My Purchases ก็จะมาในหน้าที่ชื่อว่า Purchases หรือสินค้าที่เคยซื้อไปแล้ว ตรงนี้ก็จะเป็นคลังที่เคยกดสะสมไว้ สินค้าที่เคยกด Download จากหน้า Free Goods ก็จะมีอยู่ที่หน้านี้ ซึ่งสามารถมากด Download ย้อนหลังได้เลยครับ

    Tips เล็กๆน้อยๆ

    ในการกด Free Download เพื่อเก็บสินค้าเข้า Account เรา ไม่จำเป็นต้อง Download ลงเครื่องเราจริงๆ เพียงแค่กด Free Download จะมีหน้าต่าง Browse File ขึ้นมาให้เลือกสถานที่บันทึกไฟล์ให้กด Cancel หรือยกเลิกออกมาได้เลย เท่านี้ระบบก็เข้าใจแล้วว่าเราได้ทำการซื้อสินค้าชิ้นนั้นไปแล้วจริงๆ (ตรวจสอบได้จาก Email แจ้งเตือนว่ามีการกดสินค้าชิ้นนั้นๆไป)

    จริงๆแล้วใน Creative Market ยังมีระบบ Blog แชร์เทคนิคการออกแบบและระบบ Community นักออกแบบด้วย ครบจบทุกอย่างเรื่องการออกแบบและดีไซน์ในเว็ปเดียว

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

    ขอบคุณทุกท่านที่เข้ามาอ่านครับ ไว้เจอกันโอกาสหน้าครับ 😀
  • วิธีใช้ฟอนต์ TH SarabanPSK บน Google Drive

    ในที่สุด Google ประเทศไทยก็เอาฟอนต์ราชการขึ้นไปให้ใช้ได้สำเร็จ ต่อจากนี้ เราก็สามารถลดการพึ่งพิง Microsoft Office ซึ่งผูกขาดมายาวนานได้ “บ้าง” แล้ว เพราะที่ผ่านมา เอกสาร .doc และ .docx ไม่สามารถใช้งานกับ Office Suite ค่ายอื่นได้อย่างราบรื่นเพราะคนไทยเราไม่ใช้ฟอนต์เดียวกัน ยังไปใช้ Angsana, Cordia ซึ่งเป็นลิขสิทธิ์ของ Microsoft ทำให้รูปแบบเอกสารที่จัดด้วย Microsoft Office จะเพี้ยนๆเมื่อไปเปิดกับค่ายอื่นๆ

    ตอนนี้ก็เหลือแต่ คนไทยเรานี่แหล่ะ ที่ต้องรณรงค์ใช้ฟอนต์แห่งชาติ เพื่อให้สามารถแลกเปลี่ยนกันได้อย่างเสรี

    สำหรับ Google Drive เองก็มี Office Suite ซึ่งทำงานได้บนเว็บโดยไม่ต้องติดตั้งอะไรในเครื่อง จากการทดลองใช้มายาวนาน พบว่า ถ้าเราเอาคำว่า “พอเพียง” ไว้ในใจได้แล้ว เครื่องมือชิ้นนี้ ดีเกินพอสำหรับงานสำนักงานทั่วไป และหากใครต้องการซื้อความสามารถเพิ่มก็สามารถซื้อแยกได้ ไม่ต้องถูกยัดเยียดสิ่งที่ไม่จำเป็นต้องใช้ มาในราคาซอฟต์แวร์ที่แพงลิ่ว หรือ สามารถพัฒนาเพิ่มเติมเองได้ผ่าน Add-Ons ครับ

    สำหรับการใช้งานภาษาไทย และฟอนต์ไทย TH SarabanPSK ก็ทำได้ง่ายโดย

    1. สร้าง หรือ เปิดเอกสาร Google Docs
    2. ไปที่เมนู File > Language แล้วเลื่อนมาด้านล่างๆ จะพบคำว่า ไทย
    Google Docs File Menu
    3. จากนั้น ฟอนต์ TH SarabanPSK ก็จะมีให้ใช้งานทันทีครับ
    TH SarabanPSK
    4. การเก็บไฟล์ในรูปแบบ Google Docs ทาง Google จะไม่คิดพื้นที่จัดเก็บครับ แสดงว่าเราสร้างได้มากเท่าที่ต้องการ แต่ถ้าเอา .docx ไปใส่ ก็จะกินเนื้อที่ที่มีให้ครับ

    หวังว่าจะเป็นประโยชน์ครับ