หน้า: [1]
 
ผู้เขียน หัวข้อ: (HTML coding)สอบถามเกี่ยวกับส่วน text previewของเว??  (อ่าน 502 ครั้ง)
0 สมาชิก และ 1 ขาจร กำลังดูหัวข้อนี้
พอดีกำลังจะมีโปรเจ็คเกี่ยวกับเว็ป ซึ่งมีส่วนให้ทดลองฟอนต์ค่ะ เลยอยากให้มีการทดลองพิมพ์แล้วเป็นฟอนต์นั้นๆเลย
เรียกไม่ค่อยถูกแต่ขอเดาว่าน่าจะเรียกว่า ช่อง 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

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


ถ้าทำเว็บเสร็จแล้วเอามาอวดด้วยนะครับ อยากเห็น กรี๊ดดดดด
« แก้ไขครั้งสุดท้าย: 14 เม.ย. 2022, 22:44 น. โดย iannnnn » บันทึกการเข้า

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

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

https://codepen.io/namahake/pen/VwQoood
« แก้ไขครั้งสุดท้าย: 26 มิ.ย. 2022, 01:13 น. โดย Pocket Fonts » บันทึกการเข้า
กรี๊ดดดดด ขอบคุณครับ

ขออนุญาต embed

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

« แก้ไขครั้งสุดท้าย: 26 มิ.ย. 2022, 20:45 น. โดย iannnnn » บันทึกการเข้า

ทำมาหากินด้วยการเปิดร้านสกรีนเสื้อยืด จ้ะ
หน้า: [1]
 
 
Powered by MySQL Powered by PHP Powered by SMF 1.1.21 | SMF © 2006-2007, Simple Machines | Thai language by ThaiSMF Valid XHTML 1.0! Valid CSS!