พอดีกำลังจะมีโปรเจ็คเกี่ยวกับเว็ป ซึ่งมีส่วนให้ทดลองฟอนต์ค่ะ เลยอยากให้มีการทดลองพิมพ์แล้วเป็นฟอนต์นั้นๆเลย
เรียกไม่ค่อยถูกแต่ขอเดาว่าน่าจะเรียกว่า ช่อง text preview เคยเห็นในเว็ปF0ntในอดีต(คิดว่าแต่ก่อนน่าจะทำกับ Flash ค่ะ)
ที่เป็นช่องตกแต่งพื้นหลังพิมพ์แล้วเปลี่ยนเลย อยากลองทำแบบนี้ที่สุดค่ะ
แต่ถ้าไม่ได้ จะเป็นแบบแยกมาทดลองพิมพ์แบบนี้เหมือนของ google font
(http://img3.f0nt.com/14/a01aa639fc4fee2b09da00bd2f6a2036.png)
หรือ creative market หน้าตาแบบนี้ก็ได้ค่ะ
(http://img3.f0nt.com/14/fd3c760e0535edee57946788ba5f8599.png)
อยากรู้ว่ามีโค๊ดอย่างง่ายที่เขียนแล้วเป็นแบบนี้มั้ยคะหรือมี wordpress plug-in ตัวไหนที่พอจะช่วยได้บ้าง
พยายามหาในกูเกิ้ลแต่ไม่รู้จะพิมพ์ว่ายังไงให้เจอที่ต้องการค่ะ สามารถแปะลิ้งค์ให้ไปอ่านต่อเองได้นะคะ
รบกวนทุกคนด้วยค่ะ
เมื่อก่อนใช้เแฟลชเพลินมากเลยครับ :30:
แต่เดี๋ยวนี้พอมันล้าสมัยไปแล้วก็ยังไม่ได้คิดวิธีใหม่ๆ เลย
ผมลองค้นใน Codepen ด้วยคำว่า Font Preview เจอประมาณนี้
https://codepen.io/dhughes_dw/pen/mPjxbL
https://codepen.io/krishnab/pen/noMPGM
https://codepen.io/ndjs/pen/reqMdY
https://codepen.io/heiswayi/pen/WRGdYX
https://codepen.io/super8989/pen/deJbvy
น่าจะใกล้เคียงกับที่ต้องการครับ ลองแงะโค้ดดู
ถ้าทำเว็บเสร็จแล้วเอามาอวดด้วยนะครับ อยากเห็น :25:
เพิ่งมาตอบเอาป่านนี้คงไม่ทันแล้วล่ะ แต่ว่าตอบทิ้งไว้เท่าที่พอจะทราบ เผื่อมีท่านอื่นสงสัยและมาดูที่หลังละกันครับ
ถ้าเป็นแบบของ google font เราสามารถสร้างเป็น textarea ใน html แล้วก็ เพิ่ม class สำหรับที่จะให้กล่องไหนแสดงฟอนต์ไหนได้เลยครับ. ใน css ก็สร้าง class แยกออกมาเป็นตัวๆ ไว้ ใส่เฉพาะแค่ font-family อย่างเดียวเลย ตัวอย่าง
=html=
<textarea class="other-class-style kanit" ></textarea>
=css=
.kanit { font-family: 'Kanit' };
ส่วนถ้าแบบที่2 แบบนี้น่าจะเรียกว่า Test Drive (ถ้าผิดขออภัย :08:) แบบนี้จะยากขึ้นหน่อยคือต้องสร้างกล่อง text preview ไว้แสดงผล กับ ช่อง text input แยกเป็น 2 ส่วน ในส่วนของ text preview ก็กำหนด class แบบของ google ข้างบนเลย แต่ที่นี้เจ้า text preview นี้มันพิมพ์ลงไปไม่ได้ จึงต้องสร้าง script ให้มันดึงข้อความจากช่อง text input มาแสดงผลแทน ผมพยายามลองเขียนโค้ดส่วน script ให้สั้นที่สุดดูแล้ว ลองเข้าไปดูเผื่อผมจะอธิบายไม่เข้าใจ 555
https://codepen.io/namahake/pen/VwQoood (https://codepen.io/namahake/pen/VwQoood)
:25: ขอบคุณครับ
ขออนุญาต embed