(HTML coding)สอบถามเกี่ยวกับส่วน text previewของเว??

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

แต่ถ้าไม่ได้ จะเป็นแบบแยกมาทดลองพิมพ์แบบนี้เหมือนของ google font

หรือ creative market หน้าตาแบบนี้ก็ได้ค่ะ


อยากรู้ว่ามีโค๊ดอย่างง่ายที่เขียนแล้วเป็นแบบนี้มั้ยคะหรือมี wordpress plug-in ตัวไหนที่พอจะช่วยได้บ้าง
พยายามหาในกูเกิ้ลแต่ไม่รู้จะพิมพ์ว่ายังไงให้เจอที่ต้องการค่ะ สามารถแปะลิ้งค์ให้ไปอ่านต่อเองได้นะคะ
รบกวนทุกคนด้วยค่ะ

เมื่อก่อนใช้เแฟลชเพลินมากเลยครับ
แต่เดี๋ยวนี้พอมันล้าสมัยไปแล้วก็ยังไม่ได้คิดวิธีใหม่ๆ เลย

ผมลองค้นใน 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

น่าจะใกล้เคียงกับที่ต้องการครับ ลองแงะโค้ดดู


ถ้าทำเว็บเสร็จแล้วเอามาอวดด้วยนะครับ อยากเห็น

เพิ่งมาตอบเอาป่านนี้คงไม่ทันแล้วล่ะ แต่ว่าตอบทิ้งไว้เท่าที่พอจะทราบ เผื่อมีท่านอื่นสงสัยและมาดูที่หลังละกันครับ

ถ้าเป็นแบบของ 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 (ถ้าผิดขออภัย ) แบบนี้จะยากขึ้นหน่อยคือต้องสร้างกล่อง text preview ไว้แสดงผล กับ ช่อง text input แยกเป็น 2 ส่วน ในส่วนของ text preview ก็กำหนด class แบบของ google ข้างบนเลย แต่ที่นี้เจ้า text preview นี้มันพิมพ์ลงไปไม่ได้ จึงต้องสร้าง script ให้มันดึงข้อความจากช่อง text input มาแสดงผลแทน ผมพยายามลองเขียนโค้ดส่วน script ให้สั้นที่สุดดูแล้ว ลองเข้าไปดูเผื่อผมจะอธิบายไม่เข้าใจ 555

https://codepen.io/namahake/pen/VwQoood

ขอบคุณครับ

ขออนุญาต embed

 See the Pen  Untitled by namahake (@namahake)  on CodePen.