การใช้งาน @font-face และวิธีทำให้ใช้ได้ Cross-Browser

@font-face rule คืออะไร?
ในสมัยก่อน font ที่เราจะใช้ได้ จะต้องติดตั้งอยู่ที่เครื่องของ users เท่านั้นครับ การใช้ font จึงค่อนข้างถูกจำกัด แต่หลังจากที่ @font-face ได้ถูกเพิ่มเข้ามาใน specification ของ CSS3 การใช้ font บนเว็บก็มีความหลากหลายมากขึ้น

@font-face เป็นกลไกที่จะช่วยให้เราสามารถเรียกใช้ font ที่ไม่ได้ถูกติดตั้งไว้ที่เครื่องของ users ได้ครับ หลักการของมันก็ง่ายๆ คือมันจะทำหน้าที่เป็น “ตัวระบุ” ที่อยู่ของ “font file” ที่เราต้องการจะใช้นั่นเอง
 
@font-face {     font-family: Helvetica;     src: url('http://www.yourdomain.com/fonts/Helvetica.ttf'); } body {     font-family: Helvetica; }
@font-face {
    font-family: Helvetica;
    src: url('http://www.yourdomain.com/fonts/Helvetica.ttf');
}
body {
    font-family: Helvetica;
}

จาก ตัวอย่างนี้ ผมกลัวว่าบางคนจะไม่มี font “Helvetica” ติดตั้งเอาไว้ในเครื่อง ผมก็เลยเขียน “@font-face rule” ขึ้นมาครับ จากนี้ไป เมื่อมี elements ใดๆ ก็ตาม ที่เรียกใช้ font “Helvetica” มันก็จะไม่อ่าน font file จากเครื่องของ user คนนั้นๆ แล้วครับ แต่จะไปอ่านจาก “http://www.yourdomain.com/fonts/Helvetica.ttf” ที่เราได้ระบุเอาไว้แทน

บางคนสงสัยว่า ถ้าเราอยากจะใช้ font หลายๆ ตัว ร่วมกัน จะต้องเขียนอย่างไร? ให้เราเพิ่ม “@font-face rule” เข้าไปอีกครับ จำไว้เสมอว่าถ้าไม่มี “@font-face rule” web browsers จะหา font นั้นๆ จากเครื่องของ user เสมอ
 
@font-face {     font-family: Helvetica;     src: url('http://www.yourdomain.com/fonts/Helvetica.ttf'); } @font-face {     font-family: Georgia;     src: url('http://www.yourdomain.com/fonts/Georgia.ttf'); } body {     font-family: Helvetica; } h1 {     font-family: Georgia; }
@font-face {
    font-family: Helvetica;
    src: url('http://www.yourdomain.com/fonts/Helvetica.ttf');
}
@font-face {
    font-family: Georgia;
    src: url('http://www.yourdomain.com/fonts/Georgia.ttf');
}
body {
    font-family: Helvetica;
}
h1 {
    font-family: Georgia;
}

จะ เห็นว่าการใช้ “@font-face” นั้นไม่ยากเลยครับ แต่ปัญหามันอยู่ตรงที่ แต่ละ web browsers นั้น รองรับ font file ในรูปแบบ(format) ที่แตกต่างกันออกไป ถ้าดูจากตัวอย่างข้างต้น จะเห็นว่าผมใช้ font file นามสกุล “ttf” หรือ “TrueType” ครับ ซึ่ง font file ในรูปแบบนี้ เป็นที่นิยมใช้กันมาก และหาดาวน์โหลดได้ฟรีจากเว็บไซต์ต่างๆ แต่กลับพบว่ายังมีบาง web browsers ที่ไม่รองรับ font file นามสกุลนี้อยู่ดี

แล้วต้องเขียนอย่างไร ถึงจะใช้ได้ทุก Browsers?
ในสมัยก่อน web browser ที่รองรับ @font-face มีแต่ Internet Explorer เท่านั้นครับ เราจึงต้องเลือกใช้ font file ที่ IE รองรับ นั่นก็คือ รูปแบบ “eot”
 
@font-face {     font-family: Helvetica;     src: url('Helvetica.eot'); }
@font-face {
    font-family: Helvetica;
    src: url('Helvetica.eot');
}

ใน เวลาต่อมา web browsers ต่างๆ เริ่มรองรับ @font-face มากขึ้น แต่กลับรองรับ font file ในรูปแบบที่ไม่เหมือนกัน เราจึงต้องจัดเตรียม font file ในรูปแบบต่างๆ มาให้พร้อม เพื่อให้สามารถใช้ได้กับทุกๆ web browsers
 
@font-face {     font-family: Helvetica;     src: url('Helvetica.eot'), url('Helvetica.woff'), url('Helvetica.ttf'); } 
@font-face {
    font-family: Helvetica;
    src: url('Helvetica.eot'), url('Helvetica.woff'), url('Helvetica.ttf');
}

จะ เห็นว่าผมได้เพิ่ม font file นามสกุล “woff” และ “ttf” เข้ามาเพิ่ม รวมทั้งหมดเป็น 3  fonts ด้วยกัน ซึ่งทำให้เราใช้ @font-face ได้เกือบจะทุก web browsers ในเวลานี้แล้ว

แต่เมื่อนำโค้ดด้านบน ไปลองเปิดด้วย IE เวอร์ชั่นที่ต่ำกว่า 9 กลับพบว่า @font-face ไม่ทำงาน ที่เป็นเช่นนี้เพราะว่า IE รุ่นเก่าๆ ยังไม่รองรับการเขียน src แบบหลาย url เรียงต่อกันครับ

จากตัวอย่างด้านบน IE รุ่นเก่าๆ จะมอง url ที่เราเขียนเรียงต่อกันเป็นเพียง url เดียว ก็คือ ‘Helvetica.eot’), url(‘Helvetica.woff’), url(‘Helvetica.ttf’ ซึ่งแน่นอนว่า url แบบนี้จะต้องไม่พบอะไร(404 Not Found) ให้เราแก้ปัญหานี้โดยการใส่ “?” ต่อจาก font file นามสกุล “eot” ของเราครับ จะได้โค้ดดังนี้
 
@font-face {     font-family: Helvetica;     src: url('Helvetica.eot?'), url('Helvetica.woff'), url('Helvetica.ttf'); }   
@font-face {
    font-family: Helvetica;
    src: url('Helvetica.eot?'), url('Helvetica.woff'), url('Helvetica.ttf');
}

การ เพิ่ม “?” ไม่ได้ช่วยให้ IE รุ่นเก่าๆ สามารถอ่าน src แบบหลาย url เรียงต่อกันได้ครับ แต่มันจะช่วยให้ url ที่มันอ่านได้ กลายเป็น ‘Helvetica.eot?’), url(‘Helvetica.woff’), url(‘Helvetica.ttf’ โดยปกติแล้ว web browsers จะมองว่าอะไรก็ตาม ที่อยู่หลัง “?” เป็น “query string” หรือพารามิเตอร์ที่ใช้ในการ query นั่นเอง ซึ่งมันจะไม่ใช้ในการระบุที่หมาย ทำให้ url ที่เคยดูยาวๆ นั้น กลับมีค่าเหมือนเหลือแค่ ‘Helvetica.eot’ เท่านั้น ด้วยเหตุนี้เอง การใส่ “?” จึงช่วยให้ IE รุ่นเก่าๆ สามารถหา font file ได้อย่างถูกต้อง

ปัญหา ต่อมาก็คือ การระบุ src ของ font file แบบหลาย url ทำให้ web browsers ต้องดาวน์โหลด font file เหล่านั้นมาทั้งหมด แม้ว่า web browser นั้นๆ จะไม่รองรับก็ตาม จากโค้ดด้านบน IE จะดาวน์โหลด font file มาทั้งรูปแบบ “eot”, “woff” และ “ttf” ทั้งๆ ที่จริงๆ แล้ว มันใช้แค่รูปแบบ “eot” เท่านั้น font file นึงอาจมีขนาดหลายร้อย KB เท่ากับว่าเราต้องมาเสียเวลาดาวน์โหลดโดยไม่จำเป็น

วิธีแก้ปัญหานี้ ให้เราใส่ “Format Hint” เข้าไปครับ format hint จะเป็นตัวช่วยบอก web browsers ต่างๆ ว่า font file นี้ เป็น format อะไร ถ้าไม่ใช้ ก็ไม่ต้องดาวน์โหลดมานะ (format hint รองรับตั้งแต่ IE9 เป็นต้นไป) ทีนี้ web browsers ต่างๆ ก็จะรู้แล้วว่า font file ไหนควรโหลดมา และ font file ไหนควรข้ามไป
 
@font-face {     font-family: Helvetica;     src: url('Helvetica.eot?') format('embedded-opentype'),           url('Helvetica.woff') format('woff'),           url('Helvetica.ttf') format('truetype'); }  
@font-face {
    font-family: Helvetica;
    src: url('Helvetica.eot?') format('embedded-opentype'),
         url('Helvetica.woff') format('woff'),
         url('Helvetica.ttf') format('truetype');
}

มา ถึงตอนนี้ โค้ดของเราค่อนข้างจะโอเคแล้วครับ สามารถใช้ได้กับ web browsers เกือบจะทั้งหมดแล้ว แต่ยังเหลืออีก web browser นึงครับ ที่ยังใช้ไม่ได้ นั่นก็คือ IE9 ที่อยู่ในโหมด Compatibility View โหมดนี้ถูกออกแบบมาเพื่อให้สามารถใช้ IE9 ในการดูเว็บเก่าๆ ที่เขียนมานานแล้วได้ดีขึ้น หากเราต้องการจะรองรับ IE9 ในโหมดนี้ด้วย เราจำเป็นต้องเพิ่มโค้ดเข้าไปอีกบรรทัดนึงครับ
 
@font-face {     font-family: Helvetica;     src: url('Helvetica.eot');     src: url('Helvetica.eot?') format('embedded-opentype'),           url('Helvetica.woff') format('woff'),           url('Helvetica.ttf') format('truetype'); } 
@font-face {
    font-family: Helvetica;
    src: url('Helvetica.eot');
    src: url('Helvetica.eot?') format('embedded-opentype'),
         url('Helvetica.woff') format('woff'),
         url('Helvetica.ttf') format('truetype');
}

เรา จำเป็นต้องเพิ่ม src เข้ามาอีกชุดนึง เพื่อให้ IE9 ในโหมด Compatibility View สามารถใช้ @font-face ได้ บางคนอาจบ่นว่า แค่จะให้รองรับ IE9 ในโหมด Compatibility View ถึงกับต้องเพิ่มโค้ดอีกบรรทัดเลยหรือ? เรามีวิธีแก้ครับ ให้เราเพิ่ม <meta> ค่านี้เข้าไปที่ <head>
 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

โค้ด ด้านบน จะ force ไม่ให้ IE9 อยู่ในโหมด Compatibility View ครับ แค่เราใส่โค้ดนี้ เราก็ไม่จำเป็นต้องเพิ่มโค้ดใน @font-face rule อีกบรรทัดแล้วล่ะครับ

บางคนคิดต่อ สมมติเราไม่ใส่ <meta> ดังกล่าว แล้วเลือกที่จะเพิ่มโค้ดเข้ามาอีกบรรทัด เพื่อรองรับ IE9 ในโหมด Compatibility View แล้วเรายังจะต้องใส่ font file นามสกุล “eot?” ใน src บรรทัดที่ 2 อยู่อีกมั้ย ทำไมไม่ตัดออกไปล่ะ? แบบนี้ไง
 
@font-face {     font-family: Helvetica;     src: url('Helvetica.eot');     src: url('Helvetica.woff') format('woff'),           url('Helvetica.ttf') format('truetype'); }  
@font-face {
    font-family: Helvetica;
    src: url('Helvetica.eot');
    src: url('Helvetica.woff') format('woff'),
         url('Helvetica.ttf') format('truetype');
}

คำตอบคือตัดออกไม่ได้ครับ จากโค้ดด้านบน จะเห็นว่า src บรรทัดแรก ระบุให้อ่าน font file ในรูปแบบ “eot” ถ้าเราเขียนแค่นี้ บรรทัดเดียว เราจะสามารถใช้ได้กับ IE ตั้งแต่เวอร์ชั่น 9 ลงมาเลยครับ(รวมถึง IE9 ในโหมด Compatibility View ด้วย) แต่เราจำเป็นต้องใส่ src บรรทัดที่สอง เพื่อให้รองรับ web browsers อื่นๆ ด้วย ซึ่ง src บรรทัดที่สองนี้เอง ที่จะไป “Override(มีผลเหนือกว่า)” src บรรทัดแรก ทำให้ web browsers ใดๆ ก็ตาม ที่จำเป็นต้องใช้ font file ในรูปแบบ “eot” จะไม่สามารถทำงานได้ เพราะที่ src บรรทัดที่สอง เราได้ตัด font file รูปแบบ “eot” ออกไป

บาง คนอาจสงสัยว่าทำไมผมถึงไม่พูดถึง font file ในรูปแบบ “SVG” เลย ลืมไปหรือเปล่า? คำตอบคือผมไม่ได้ลืมครับ แต่ตั้งใจไม่ได้ใส่เข้ามาใน @font-face-rule เนื่องจาก font file ในรูปแบบ “svg” ยังคงมี bug เกี่ยวกับการแสดงผลอยู่ และ web browsers ที่รองรับล้วนเป็น web browsers รุ่นเก่าๆ เช่น Safari บน iOS รุ่นต่ำกว่า 4 (พูดง่ายๆ คือ web browsers สมัยใหม่ หันไปรองรับรูปแบบอื่นหมดแล้ว)

อีกเรื่องนึงที่ผมก็ไม่ได้ พูดถึงเลยก็คือการระบุ src แบบ “Local” ครับ จริงๆ แล้ว การเขียน @font-face rule สามารถกำหนดให้ใช้ font file ที่อยู่ในเครื่อง local ได้(หากเครื่องนั้นได้ติดตั้ง font นั้นๆ เอาไว้อยู่แล้ว) เพื่อจะได้ไม่ต้องเสียเวลาดาวน์โหลด font นั้นๆ มาอีก เราสามารถใช้ทั้งแบบ local และแบบ url ร่วมกันได้ครับ ถ้ามันไม่พบ font file นั้นๆ ที่ local มันก็จะ fall-back มาใช้ font-file ที่ url แทน แต่วิธีระบุแบบ local นั้นมีข้อเสียอยู่ครับ เนื่องจากเราไม่สามารถแน่ใจได้ว่า font ที่ติดตั้งไว้ในเครื่องนั้นๆ จะมีหน้าตาตรงกับ font ที่เราต้องการจะใช้หรือไม่ ถึงแม้ว่ามันจะมีชื่อเดียวกันก็ตาม นอกจากนั้น ในบาง web browsers จะติดปัญหาเกี่ยวกับ “Permission” เนื่องจากเป็นการไป “เข้าถึง” ไฟล์ในเครื่องของ users อีกด้วยครับ ด้วยเหตุผลเหล่านี้ ผมจึงไม่แนะนำให้ใช้ src แบบ local เพราะโดยปกติแล้ว เมื่อ web browser ดาวน์โหลด font นั้นๆ มาใช้เพียงครั้งหนึ่ง มันก็จะเก็บ font file นั้นๆ เอาไว้ใน “Cache” ของมันอยู่แล้ว ทำให้เราไม่ต้องเสียเวลาดาวน์โหลดมาใช้ในครั้งต่อไปอีกครับ การใช้ src แบบ url จึงไม่ได้ทำให้เสียเวลากว่าแบบ local เท่าไรนัก

ใช้ @font-face เป็นแล้ว ทีนี้จะหา Download ได้จากที่ไหน?
หาก คิดจะใช้ @font-face ต้องนึกถึงเรื่องของลิขสิทธิ์ของ font เสมอครับ ถ้าเราต้องการจะใช้ font ที่มีลิขสิทธิ์ ให้เราปฏิบัติตามข้อกำหนดอย่างเคร่งครัด แต่ในสมัยนี้ มีหลายเว็บไซต์ที่ให้บริการดาวน์โหลด font ไปใช้ฟรีๆ อย่างเช่น Font Squirrel นอกจากนี้ ยังมีบริการที่จะช่วยให้เราใส่ @font-face ในหน้าเว็บของเราได้ง่ายขึ้นอย่าง Google Fonts และ TypeKit อีกด้วยครับ

ปฏิวัติงานรับทําเว็บไซต์ ฉีกทุกข้อจำกัด ไอเดียเฉียบล้ำนำสมัย ดีไซน์ก้าวกระโดด เพราะดีไซน์บ่งบอกถึงตัวตน พร้อมให้บริการ ด้วยทีมงานมืออาชีพ รับทำเว็บไซต์ ร้านค้าออนไลน์ รับทำเว็บไซต์ มีเอกลักษณ์ไม่ซ้ำใคร ในราคาไม่แพง คุ้มค่า รับทำเว็บไซต์ ให้คุณเข้าถึงกลุ่มเป้าหมาย รองรับติดอันดับ GOOGLE

Iphone

วิสัยทัศน์พันธกิจ รับทำเว็บไซต์

“Professional Standard” คือคำที่ทีมงานใช้ในการสื่อสารและยึดมั่นในการทำงานร่วมกัน หลายปีที่ผ่านมาเราได้รับทั้งคำชื่นชมต่าง ๆ มากมายเกี่ยวกับผลิตภัณฑ์ ผลงานและงานบริการที่บริษัทฯ ได้เป็นผู้พัฒนาและ ส่งมอบงานคุณภาพให้กับลูกค้า ด้วยความมุ่งมั่นที่จะส่งมอบ “งานคุณภาพสูง เหนือความคาดหมาย” และ “ตรงต่อเวลา” ให้กับลูกค้า

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

ขั้นตอน รับทำเว็บไซต์

เราไม่ได้แค่ รับทำเว็บไซต์ ตาม Site Map ที่ลูกค้าต้องการ แต่นี่คือ ขั้นตอนและขบวนการทำงานเกี่ยวกับ WEB Development ของเราทั้งหมด
รับทำเว็บไซต์
1.

Requirement (เก็บข้อมูลสำหรับ รับทำเว็บไซต์)

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

2.

DESIGN (ออกแบบเว็บไซต์ มีเอกลักษณ์ไม่ซ้ำใคร)

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

3.

HTML & CSS (รับทำเว็บไซต์ ด้วยเทคนิคสมัยใหม่)

สร้าง Prototype หน้าหลัก และหน้าย่อยต่างๆ ของเว็บไซต์ทั้งหมด รวมถึงหน้าจอที่จะแสดงบนมือถือหรือแท็บเล็ต ด้วยเทคโนโลยีสมัยใหม่ของการ รับทำเว็บไซต์ Web Responsive และ Web Parallax มาผสมผสานกัน เพื่อสร้างโอกาสทางการค้า และประสบความสำเร็จ ในสายงานธุรกิจของคุณ รับทำเว็บไซต์ ดีไซน์หรู คุณภาพดี

4.

CMS (รับทำเว็บไซต์ พร้อมออกแบบระบบหลังบ้าน)

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

5.

SEO (รับทำเว็บไซต์ รองรับติดอันดับ Google)

เป็นการปรับแต่งเว็บไซต์ ด้วยวิธีการต่างๆ เพื่อให้ติดอันดับในผลการค้นหา ของ Search Engine เช่น Google รับทำเว็บไซต์ ปรับแต่งโครงสร้าง และหน้าเว็บไซต์ให้รองรับกับ seo สามารถเจาะ หรือเข้าถึงกลุ่มเป้าหมายได้ตรง มีความแม่นยำ อีกทั้งยังมีประสิทธิภาพในการเข้าถึงลูกค้า ซึ่งจะมีผลต่อความก้าวหน้า ของธุรกิจโดยตรง

6.

SUPPORT (ให้คำปรึกษาหลังการ รับทำเว็บไซต์)

หลังจากทำการ รับทำเว็บไซต์ ให้กับลูกค้าจนแล้วเสร็จ ทางทีมงานยังมีบริการให้คำปรึกษาหลังการขายตลอด 24 ชั่วโมง สำหรับลูกค้าที่มีปัญหา หรือมีคำถามเพิ่มเติมเกี่ยวกับการออกแบบเว็บ หรือต้องการพัฒนาเว็บไซต์ เพิ่มเติมในวันข้างหน้า ลูกค้าสามารถติดต่อขอคำแนะนำ รับทำเว็บไซต์ ได้ตลอดเวลา

ลูกค้าบางส่วนของเรา รับทำเว็บไซต์

รับทำเว็บไซต์ มีคุณภาพเห็นผลจริง รับทำเว็บไซต์ สำหรับธุรกิจ SME รับทำเว็บไซต์ ใช้ต่อยอด ในเชิงธุรกิจ หรือเจ้าของกิจการมือใหม่ อีกระดับของ รับทำเว็บไซต์ เพื่อประโยชน์ในเชิงธุรกิจ รับทำเว็บไซต์ สวยโดดเด่น

ลูกค้า รับทำเว็บไซต์ ออกแบบเว็บไซต์ : สนามบินสมุย - บริษัท การบินกรุงเทพ จำกัด (มหาชน)

สนามบินสมุย - บริษัท การบินกรุงเทพ จำกัด (มหาชน)

samuiairport.com
ลูกค้า รับทําเว็บไซต์ ออกแบบเว็บไซต์ : บริษัท คราวน์ เทค แอดวานซ์ จำกัด (มหาชน)

บริษัท คราวน์ เทค แอดวานซ์ จำกัด (มหาชน)

ajthai.com
ลูกค้า รับทําเว็บไซต์ ออกแบบเว็บไซต์ : สนามบินสุโขทัย - บริษัท การบินกรุงเทพ จำกัด (มหาชน)

สนามบินสุโขทัย - บริษัท การบินกรุงเทพ จำกัด (มหาชน)

sukhothaiairport.com
ลูกค้า รับทําเว็บไซต์ ออกแบบเว็บไซต์ : บริษัท ลีดเดอะ เทรด โปรดักส์ จำกัด

บริษัท ลีดเดอะ เทรด โปรดักส์ จำกัด

leadertrade.net
ลูกค้า รับทําเว็บไซต์ ออกแบบเว็บไซต์ : บริษัท ที เอส ฟลาวมิลล์ จำกัด (มหาชน)

บริษัท ที เอส ฟลาวมิลล์ จำกัด (มหาชน)

tmill.co.th
ลูกค้า รับทําเว็บไซต์ ออกแบบเว็บไซต์ : บริษัท เอฟ ที เซลล์แอนด์เซอร์วิส จำกัด (โปรคลีน)

บริษัท เอฟ ที เซลล์แอนด์เซอร์วิส จำกัด (โปรคลีน)

procleanth.com
ลูกค้า รับทําเว็บไซต์ ออกแบบเว็บไซต์ : บริษัท บิสเทค (ประเทศไทย) จำกัด

บริษัท บิสเทค (ประเทศไทย) จำกัด

bistecthai.com
ลูกค้า รับทําเว็บไซต์ ออกแบบเว็บไซต์ : ร้านอาหาร ไหมไทย

ร้านอาหาร ไหมไทย

maithaibenicia.com
ลูกค้า รับทําเว็บไซต์ ออกแบบเว็บไซต์ : บริษัท ฟิลเตอร์วิชั่น จำกัด (มหาชน)

บริษัท ฟิลเตอร์วิชั่น จำกัด (มหาชน)

filtervision.co.th
ลูกค้า รับทําเว็บไซต์ ออกแบบเว็บไซต์ : สนามบินตราด - บริษัท การบินกรุงเทพ จำกัด (มหาชน)

สนามบินตราด - บริษัท การบินกรุงเทพ จำกัด (มหาชน)

tratairport.com
ลูกค้า รับทําเว็บไซต์ ออกแบบเว็บไซต์ : บริษัท ฟังก์ชั่น อินเตอร์เนชั่นแนล จำกัด

บริษัท ฟังก์ชั่น อินเตอร์เนชั่นแนล จำกัด

functioninter.com

สนใจใช้บริการ รับทำเว็บไซต์ กับบริษัท ซอฟท์เมลท์ จำกัด? ส่ง ข้อความ

ราคาแพ็คเกจ รับทำเว็บไซต์ รับออกแบบเว็บไซต์

ราคาแพ็คเกจ รับทำเว็บไซต์ รับออกแบบเว็บไซต์ ราคาแพ็คเกจ รับทำเว็บไซต์ รับออกแบบเว็บไซต์ ราคาแพ็คเกจ รับทำเว็บไซต์ รับออกแบบเว็บไซต์ ราคาแพ็คเกจ รับทำเว็บไซต์ รับออกแบบเว็บไซต์

ทำเว็บขายของ, ร้านค้าออนไลน์

เริ่มต้นธุรกิจออนไลน์เพื่อเตรียมต้อนรับ AEC กับเว็บไซต์ในยุคไทยแลนด์ 4.0 ในยุคของโลกดิจิทัลอย่างเต็มตัว ไม่ต้องลงทุนสูง อีกระดับการเป็นเจ้าของธุรกิจ SME ด้วยตัวคุณเอง ในราคาไม่แพง คุ้มค่า เพิ่มยอดขาย สร้างแบรนด์ให้เป็นที่รู้จัก ตรงใจธุรกิจของคุณ

การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 9 - การติดตั้งใช้งาน Server บน Google Cloud Platform !!!...

การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 9 - การติดตั้งใช้งาน Server บน Google Cloud Platform !!!...

Google Cloud Platform คือ บริการ Cloud Services รูปแบบหนึ่งของ Google ที่มีผลิตภัณฑ์และบริ...

อ่านต่อ
การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 8 - Kubernetes (คูเบอร์เนเตส หรือ K8s) กับการวางระบบ Server ที่ไม่มีวันล่ม !!!...

การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 8 - Kubernetes (คูเบอร์เนเตส หรือ K8s) กับการวางระบบ Server ที่ไม่มีวันล่ม !!!...

Kubernetes หรือ k8s เป็นซอฟต์แวร์ open source สำหรับใช้จัดการและควบคุม container ที่ทำงาน...

อ่านต่อ
การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 7 - การเก็บ Docker Image บน Gitlab Container Registry !!!...

การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 7 - การเก็บ Docker Image บน Gitlab Container Registry !!!...

GitLab Container Registry คือ เป็น feature หนึ่งของทาง GitLab เอาไว้ใช้สำหรับเก็บ containe...

อ่านต่อ
การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 6 - ขั้นตอนการติดตั้งใช้งาน Docker และ Docker Container !!!...

การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 6 - ขั้นตอนการติดตั้งใช้งาน Docker และ Docker Container !!!...

Docker นั้น เป็นที่รู้จักกันอย่างแพร่หลายในช่วงหลายปีที่ผ่านมานี้ เนื่องจากสามารถใช้งานได้...

อ่านต่อ
การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 5 - Docker คืออะไร และมีข้อดีอย่างไรบ้าง !!!...

การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 5 - Docker คืออะไร และมีข้อดีอย่างไรบ้าง !!!...

เนื่องจากในการพัฒนา application สมัยก่อนทุก application จะใช้ environment เดียวกันซึ่งเป็น...

อ่านต่อ
การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 4 - การเขียนคำสั่ง Gitlab CI บนไฟล์ .gitlab-ci.yml !!!...

การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 4 - การเขียนคำสั่ง Gitlab CI บนไฟล์ .gitlab-ci.yml !!!...

การทำ CI ใน Gitlab CI นั้น จำเป็นต้องสร้างไฟล์ .gitlab-ci.yml ไว้ในโฟลเดอร์ของโปรเจ็คซะก่อ...

อ่านต่อ
การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 3 - การใช้งาน Firebase Hosting !!!

การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 3 - การใช้งาน Firebase Hosting !!!

Firebase Hosting คือ ส่วนหนึ่งของบริการ Google Firebase สำหรับใช้ทำเป็น Web Hosting ที่ให้...

อ่านต่อ
การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 2 - การสร้าง Hybrid App ด้วย Ionic Framework...

การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 2 - การสร้าง Hybrid App ด้วย Ionic Framework...

Ionic Framework คือ Framework ที่ช่วยให้พัฒนาแค่ครั้งเดียวแต่เราสามารถ Build ให้ออกมาใช้งา...

อ่านต่อ

รับทำเว็บไซต์

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

รับทำเว็บไซต์ ทุกพื้นที่ ทั่วกรุงเทพฯ รับทำเว็บไซต์ รามคำแหง มีนบุรี บางกะปิ รับทำเว็บไซต์ ทวีวัฒนา ดอนเมือง สายไหม รับทำเว็บไซต์ บางขุนเทียน คลองสามวา ประเวศ รับทำเว็บไซต์ สะพานใหม่ สุขุมวิท เกษตร รับทำเว็บไซต์ รามอินทรา วังทองหลาง บางเขน รับทำเว็บไซต์ ลาดพร้าว คลองจั่น นวมินทร์ รับทำเว็บไซต์ สุขุมวิท ห้วยขวาง คลองเตย รับทำเว็บไซต์ พญาไท สาทร ดินแดง ทำเว็บไซต์ ปทุมวัน ราชเทวี รับทำเว็บไซต์ บึงกุ่ม บางนา ภาษีเจริญ ยานนาวา รับทำเว็บไซต์ จตุจักร ตลิ่งชัน สะพานสูง สวนหลวง

ติดต่อ รับทำเว็บไซต์

บริษัท ซอฟท์เมลท์ จำกัด :
1294 ห้อง 3 (เอ) ชั้น 3 ถนนสุทธิสาร วินิจฉัย ซอยอุดมสุข แขวงห้วยขวาง เขตห้วยขวาง กรุงเทพฯ 10310
Phone : 086-394-0954
Email : sales@softmelt.com
Line ID : softmelt

กรุณากรอกข้อมูล และหัวข้อ ที่ท่านสนใจทำเว็บไซต์ ทางทีมงานจะติดต่อกลับภายใน 24 ชั่วโมง