ผู้เขียน หัวข้อ: เปลี่ยนชนิดfontในSMF (อ่าน 2483 ครั้ง)

smf

ปกติใน SMF จะใช้ฟอนต์ Verdana", "Arial", "Helvetica", sans-serif
ถ้าเราอยากจะเปลี่ยนให้เว็บเราไปใช้ฟอนต์อื่นๆ ที่ทันสมัย แบบพวกเว็บไซต์รุ่นใหม่ๆ (Responsive web) เค้านิยมใช้กัน
ก็สามารถทำได้ดังนี้

อันดับแรกต้องไปเลือกฟอนต์สวยๆ อ่านง่ายไม่ซับซ่อนมาก่อน แนะนำให้ไปหาโหลดที่ www.f0nt.com เป็นฟอนต์ไทยที่สวยและฟรี
หลังจาก โหลดมาแล้วให้คัดแยกเลือกเอาเฉพาะตัวที่เป็น Regular ธรรมดา ไม่เอาพวกตัว italic ตัวเอียง หรือ bold ตัวหนา

เช่น ตัวอย่างที่เว็บ welovethailand.com ใช้คือฟอนต์ DB Adman X (ฟอนต์ตัวนี้มีขนาดเล็กกว่าปกติ เวลาใช้ จึงต้องไปเพิ่ม size ใหม่ในทุกๆตำแหน่ง แนะนำให้หาฟอนต์ที่มีขนาดปกติ)

ขั้นตอนต่อไปให้นำฟอนต์ที่ใช้ไปแปลง
สาเหตุที่ต้องนำฟอนต์ไปแปลงก่อน เพื่อให้แต่ละ Browser รู้จักตามกฎของการใช้ฟอนต์กับ Browser

กฎของการใช้ font-face (CSS3 @font-face Rule)
The @font-face rule is supported in
- Internet Explorer 9, Firefox, Opera, Chrome, and Safari. << Browser ที่รองรับ
- Internet Explorer 9+, Firefox, Chrome, Safari, and Opera support the WOFF (Web Open Font Format) font.
- Firefox, Chrome, Safari, and Opera also support fonts of type TTF (True Type Fonts) and OTF (OpenType Fonts).
- Chrome, Safari and Opera also support SVG fonts/shapes.
- Internet Explorer also supports EOT (Embedded OpenType) fonts.
Note: Internet Explorer 8 and earlier versions, do not support the @font-face rule. (IE เวอร์ชั่นต่ำกว่า 8 ไม่รองรับ @font-face)

* Internet Explorer 9+ , Chrome 4.0+ , Firefox 3.5+ , Safari 3.2+ , Opera 10.0+ *
อ้างอิง : CSS3 Web Fonts - The @font-face Rule

ดัง นั้นจึงจำเป็นต้องนำฟอนต์ไปแปลงก่อนการนำมาใช้งาน เพื่อจะได้นำตัวฟอนต์ไปฝังไว้ยัง server เพื่อเรียกใช้งาน หากไม่ทำเช่นนี้ แล้วใส่แต่เพียงชื่อฟอนต์ ลงไปจะเกิดปัญหา เมื่อสมาชิกหรือคนทั่วไปเข้ามายังเว็บเราแล้ว เครื่องคอมพิวเตอร์เค้าไม่มีฟอนต์ในแบบที่เราใช้ ตัวหนังสือก็จะไม่มีการเปลี่ยนแปลงใดๆ

ขั้นตอนนำฟอนต์ที่ใช้ไปแปลง ( DB Adman X.ttf ) ในเว็บที่รับแปลงฟอนต์ มีมากมาย โดยใช้คำค้นหาว่า font-face generator จะพบเว็บรับแปลงมากมาย (แต่บางเว็บแปลงออกมาแล้วก็ใช้งานไม่ได้) ตัวฟอนต์ ไม่รองรับ บางเว็บรองรับแต่ดัน generate โค้ดออกมาใช้ไม่ได้ บางเว็บก็ไม่พัฒนาโค้ดล้าสมัยใช้ไม่ได้อีก แนะนำ http://www.font2web.com แต่ถ้าใช้ไม่ได้กับฟอนต์ของคุณ ก็ลองดูเว็บอื่น [ http://everythingfonts.com/font-face ]

วิธี แปลงก็ไม่ยากครับ (เฉพาะเว็บนี้ font2web เว็บอื่นอาจเรื่องเยอะ ) เข้าไปยังเว็บแปลงแล้ว brows ไปที่ไฟล์ฟอนต์ของเรา แล้วคลิก Convert&Download

มันจะได้ ไฟล์ DB Adman X.zip ให้คลาย .zip ออก จะได้ โฟล์เดอร์ fonts ด้านในจะบรรจุไฟล์ที่เราต้องการอยู่ในนั้น
ส่วนไฟล์อื่นๆ เช่น demo.html , fonts.css พวกนี้เราไม่ใช้เป็นเพียงโค้ดรูปแบบการใช้งานตัวอย่าง ไฟล์สำคัญที่ใช้คือ โฟล์เดอร์ fonts
แต่ให้เปิดไฟล์ fonts.css แล้วก็อปเอารูปแบบโค้ดมาใช้

ชุดของไฟล์ฟอนต์ font-face จะต้องประกอบไปด้วย
.eot
X.otf
.svg
.ttf
.woff

อัพโหลดฟอนต์ขึ้นฝังบน server

ให้นำโฟล์เดอร์ fonts (หรือเอาเฉพาะตัวฟอนต์) ไปอัพไว้ใน บอร์ด SMF ของเราผ่านทาง FTP :
ไว้ใน Themes/ชื่อธีมที่เราใช้/fonts
หลังจากนั้นให้ ดึงไฟล์ index.css จาก Themes/ชื่อธีมที่เราใช้/css/index.css ออกมาเพื่อแก้ไข (ทำสำเนา copy ไว้ 1 ชุด)
ในไฟล์ fonts.css ที่ ganerate ออกมาก็จะมีโค้ดตัวอย่างการใช้งาน ให้ copy ออกมาแล้วเพิ่ม ลงไปใน index.css

ตัวอย่างเช่น

โค๊ด: [Select]

@font-face {
   font-family: 'Conv_DB Adman X';
   src: url('../fonts/DB Adman X.eot'); /* IE9 Compat Modes */
   src: url('../fonts/DB Adman X.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('../fonts/DB Adman X.woff') format('woff'), 
   url('../fonts/DB Adman X.ttf') format('truetype'), 
   url('../fonts/DB Adman X.svg') format('svg');
   font-weight: normal;
   font-style: normal;
}

แก้ไขตรงพาธไฟล์ที่เรียกฟอนต์มาใช้งานให้ถูกต้องด้วย เช่น url('../fonts/DB Adman X.ttf') แก้ไขตรงสีแดงให้ตรงกับเว็บเรา

*** แก้ไขเพิ่มเติม (สำหรับโค้ดจาก font2web)***
* src: local('?'),
บางแหล่งบอกเติมแบบนี้สามารถใช้ได้ทุก browser >> src: local( 'Conv_DB Adman X');
อ้างอิง : After adding 'local' to the fonts, it worked accross all browsers.
เพิ่มแบบนี้สามารถใช้ IE6-IE8 ได้ src: url('../fonts/DB Adman X.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
(การวางต้องระวังคำสั่งปิดท้ายให้ถูกต้องด้วย ; และ , )
* โดเมนภาษาไทย ยังมีปัญหา กับ smf theme www.เรารักประเทศไทย.com/webboard/index.php

หลังจากนั้นไล่เปลี่ยนในส่วน body ของไฟล์ index.css
ยกตัวอย่างเช่น
ค้นหา

โค๊ด: [Select]

body
{
   background: #a0b7c6;   
   font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
   margin: 0 auto;
   padding: 0;
}

แก้เป็น

โค๊ด: [Select]

body
{
   background: #a0b7c6;   
   font: 110%/130% "Conv_DB Adman X","Verdana", "Arial", "Helvetica", sans-serif;
   margin: 0 auto;
   padding: 0;
}

ตัวอย่างผมใช้ Conv_DB Adman X ผมก็เติมมันลงไปอันดับแรก เงื่อนไขหากอันดับแรกไม่สามารถแสดงได้ (Broser รุ่นเก่าๆไม่รองรับ) มันก็จะไปเรียก Verdana, Arial, Helvetica, ตลอดจน sans-serif มาใช้แทน เราอาจเพิ่ม Tahoma ไว้อันดับที่ 2 ก็ได้
*อธิบายเพิ่ม*
font:78% คือขนาด font-size: 78%
130% คือระยะห่างบันทัดของตัวอักษรได้แก่ line-height: 130%
"Verdana", "Arial", "Helvetica", sans-serif; คือแบบฟอนต์ที่ใช้แสดง
margin: 0 auto; คือการจัดกึ่งกลาง
padding: 15px 0; ระยะห่างระหว่างตัวอักษรกับตัวเว็บ 15px หมายถึง บน-ล่าง, 0 หมายถึง ซ้าย-ขวา (ชิดขอบเว็บ)

ที่เหลือคุณก็ไล่เปลี่ยนให้หมด โดยใช้เทคนิค ค้นหาคำหลักๆ ดังนี้
font-family:
font-size:
เจอ font-family: ที่ไหนก็ไล่ใส่ชื่อฟอนต์ของคุณเพิ่มลงไปเป็นอันดับแรก "Conv_DB Adman X",
เจอ font-size: ที่ไหนหากต้องการแก้ไขขนาดก็ไล่เพิ่มหรือลดเอาตามชอบใจ

เมื่อเปลี่ยนแล้วลองไปดูผล หากออกมาแล้วเละเทะ ผิดพลาด ก็ให้เอา index.css สำเนาที่ทำ copy ไว้ 1 ชุด รีบทับกลับลงไปทันที

แนะนำเทคนิค ในการเปลี่ยน ขนาดตัวอักษร หรือสี เป็นจุดๆ ตามที่เราต้องการ แบบละเอียดดูที่นี่
ใช้ เครื่องมือช่วยในการดู class ของ css ได้แก่ Browser FireFox , Google Chrome และ IE เวอร์ชั่นสูงๆ 10 ขึ้นไปกดF12 หรือคลิกขวาเลือก Inspect element

ตัวอย่างการใช้จาก Browser FireFox ให้เลือกพื้นที่ที่ต้องการดู class ของ css
แล้วคลิกขวา เลือก ตรวจดูส่วนประกอบ เราก็จะรู้ทันที่ว่า ส่วนนั้นๆใช้ class หรือ div id= อะไร เราก็เข้าไปหาในไฟล์ .css แล้วแก้ไขเอาตามใจชอบ

หากต้องการเลือกชี้เป็นจุดๆ ให้คลิกที่สัญลักษณ์

หัวลูกศรก่อน ตามรูป แล้วนำไปชี้ยังตำแหน่งที่ต้องการดู css ต่อจากนั้นคลิกซ้ายที่เมาท์ เพื่อมาร์คจุด class css ก็จะปรากฎ

Sample Class แต่ละธีม อาจจะใช้แตกต่างกันออกไป แต่ก็จะประมาณนี้

หากต้องการแก้ไขฟอนต์ในส่วนของ copyright ให้แก้ที่ไฟล์ Sources/Subs.php

ค้นหา

โค๊ด: [Select]

<span class="smalltext" style="display: inline; visibility: visible; font-family: Verdana, Arial, sans-serif;">' . $forum_copyright . '
         </span>

แล้วแก้ที่ font-family: เช่นเดิม

แก้ขนาดตัวอักษรใน editor ที่เล็กเกินไป

แก้ไข Themes/default/GenericControls.template.php

ค้นหา
margin-bottom: 1ex; font-size: x-small;
แก้เป็น font-size: medium
ฟอนต์ DB Adman X ที่ผมใช้ ค่อนค้างมีขนาดเล็ก เมื่อเจอ font-size: x-small จึงดูแทบไม่รู้เรื่อง จึงต้องใล่แก้ไขให้เป็นขนาด medium ในหลายๆจุด และยังมีผลต่อ บทความเก่าๆที่เวลาผู้โพสต์เลือกใช้ ขนาด ฟอนต์ 8pt , 10pt , 12pt ไปแล้ว ก็จะเล็กอ่านแทบไม่รู้เรื่องเลย

* แนะนำเพิ่มเติม รวม 13 ฟอนต์ไทยแห่งชาติในรูปแบบ Webfont เพื่อใช้แสดงผลในเว็บไซต์
ซึ่งตัวฟอนต์ถูกแปลงเรียบร้อยแล้วพร้อมใช้งาน และดูแนวทางรูปแบบการใช้ ตัว หนา bold ตัวเอง italic ได้ในไฟล์ css ของแต่ละอัน

ตัวอย่างจาก ฟอนต์ TH Kodchasan

โค๊ด: [Select]

@font-face {
    font-family: 'THKodchasal';
    src: url('th_kodchasal_bold_italic-webfont.eot');
    src: url('th_kodchasal_bold_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('th_kodchasal_bold_italic-webfont.woff') format('woff'),
         url('th_kodchasal_bold_italic-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;

}

@font-face {
    font-family: 'THKodchasal';
    src: url('th_kodchasal_bold-webfont.eot');
    src: url('th_kodchasal_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('th_kodchasal_bold-webfont.woff') format('woff'),
         url('th_kodchasal_bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'THKodchasal';
    src: url('th_kodchasal_italic-webfont.eot');
    src: url('th_kodchasal_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('th_kodchasal_italic-webfont.woff') format('woff'),
         url('th_kodchasal_italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'THKodchasal';
    src: url('th_kodchasal-webfont.eot');
    src: url('th_kodchasal-webfont.eot?#iefix') format('embedded-opentype'),
         url('th_kodchasal-webfont.woff') format('woff'),
         url('th_kodchasal-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

.th_kodchasal{
   font-family: 'THKodchasal', sans-serif;
}

  
เรื่องเปลี่ยนสีค้นหาได้ 2 วิธี วิธีแรกง่ายที่สุด คลิกขวาไปยังตำแหน่งของตัวหนังสือ ก็จะเห็นค่าของสี ด้านขวามือปรากฎ ดูรูปด้านล่าง


นำ ค่าสี  #000 ดังกล่าว มาค้นหา (ความจริงเจอสีก็เจอชื่อ class พร้อมขนาดตัวอักษร) ในภาพเป็นธีมของผม ท่านอาจหาไม่เจอในธีมของท่าน อย่างที่บอกไป ธีมใครธีมมันไม่สามารถบอกให้กันได้ จึงต้องแนะนำเครื่องมือในการค้นหา แล้วให้ไปค้นหาแก้ไขกันเอาเอง
วิธีที่2 Cap ภาพมาแล้วดูดเอาค่าสีไปค้นหา เครื่องมือดูดค่าสี photoshop หรือ Dreamweaver ก็ใช้ได้เช่นกัน
ใน ภาพตัวอย่างผมเขียน class inner2 ขึ้นมาใหม่เอง แล้วใส่ขนาดตัวหนังสือ สี หรือค่าต่างๆตามที่เราต้องการ เพื่อที่จะไม่ให้ไปกระทบกับส่วนอื่นๆ ท่านก็สามารถใช้หลักการเดียวกันนี้ได้ โดยหาขอบเขตของ Class ก่อน เหมือนในรูปที่ผมไฮไลท์สีเอาไว้

credit: http://www.welovethailand.com/webboard/index.php?topic=4136.0

แจกของฟรี

ข่าว:

ผู้เขียน หัวข้อ: เปลี่ยนชนิดfontในSMF (อ่าน 2483 ครั้ง)

smf

เปลี่ยนชนิดfontในSMF