ต่อไป »

[koraman]

 

ก่อนอื่น คือ ผมใช้โปรแกรม Artisteer ออกแบบ template joomla
แล้วทีนี้ก็เลยกำหนดให้ Top Menu ด้านบนของเว็บ ใช้ font ที่ต่างกับเนื้อหาทั่วไป

ก็เลยไปค้นๆ วิธีฝัง font ในเว็บมามากมาย แต่แก้ไม่ได้สักที 
ผมจะทำอย่างไรที รบกวนผู้รู้ช่วยแนะนำทีครับ _/|\_

-------------------------------------------------------
ตอนนี้มี file font ทั้ง .tff .eot .woff .svg อัปขึ้น server ไว้แล้ว
-------------------------------------------------------

วิธีที่ทดลองใช้ แล้วไม่ได้ผล (อาจจะทำผิดเอง แต่ไม่รู้จะแก้ตรงไหน)
1.ใช้ Component กับ Plugin ของ Phoca-Font 
2.ลองเพิ่ม code ลงในไฟล์ css ทุกอัน (ที่อยู่ในโฟลเดอร์ css ของ template)
   
  แบบนี้ครับ
    #Font-face
   @font-face {
   font-family: 'Font X';
   src: url('/font/Font X.eot');
   src: url('/font/Font X.eot?#iefix') format('embedded-opentype'),
        url('/font/Font X.woff') format('woff'),
        url('/font/Font X.ttf') format('truetype'),
        url('/font/Font X.svg#Font X') format('svg');
}

[zankumuro]

Cufón

- ไป Gen ตัว font ที่จะใช้ก่อนหน้านี้ http://cufon.shoqolate.com/generate/
- โหลด font กลับมา

เรียกใช้ผ่าน

โค๊ด:

<script src="http://cdnjs.cloudflare.com/ajax/libs/cufon/1.09i/cufon-yui.js" type="text/javascript"></script>
<script src="ที่เก็บไฟล์ font ที่โหลดลงมา" type="text/javascript"></script>
<script type="text/javascript">
Cufon('h1', {
     color: '-linear-gradient(#b7dded, 0.2=#70ceef, 0.5=#20b4e2, #b1dbeb)'
});
Cufon('h3');
</script>

[koraman]

Cufón

- ไป Gen ตัว font ที่จะใช้ก่อนหน้านี้ http://cufon.shoqolate.com/generate/
- โหลด font กลับมา

เรียกใช้ผ่าน

โค๊ด:

<script src="http://cdnjs.cloudflare.com/ajax/libs/cufon/1.09i/cufon-yui.js" type="text/javascript"></script>
<script src="ที่เก็บไฟล์ font ที่โหลดลงมา" type="text/javascript"></script>
<script type="text/javascript">
Cufon('h1', {
     color: '-linear-gradient(#b7dded, 0.2=#70ceef, 0.5=#20b4e2, #b1dbeb)'
});
Cufon('h3');
</script>

เอา Code ข้างบน ไปแทรกไว้ในไฟล์ไหนหรอครับ?   ใช่ template.php หรือเปล่าครับ?

[koraman]

ตอนนี้ลองโหลด plugin >> KC Cufón Font Replacement มาใช้ดูครับ

ถ้าได้ไม่ได้ยังไง จะมารายงานผลนะครับ

แต่ถ้าเซียน joomla ท่านใดพอทราบวิธีนี้ หรือวิธีอื่นๆ ช่วยแนะนำด้วยละกันครับ

[zankumuro]

Cufón

- ไป Gen ตัว font ที่จะใช้ก่อนหน้านี้ http://cufon.shoqolate.com/generate/
- โหลด font กลับมา

เรียกใช้ผ่าน

โค๊ด:

<script src="http://cdnjs.cloudflare.com/ajax/libs/cufon/1.09i/cufon-yui.js" type="text/javascript"></script>
<script src="ที่เก็บไฟล์ font ที่โหลดลงมา" type="text/javascript"></script>
<script type="text/javascript">
Cufon('h1', {
     color: '-linear-gradient(#b7dded, 0.2=#70ceef, 0.5=#20b4e2, #b1dbeb)'
});
Cufon('h3');
</script>

เอา Code ข้างบน ไปแทรกไว้ในไฟล์ไหนหรอครับ?   ใช่ template.php หรือเปล่าครับ?

เอาไว้ในหน้าที่จะให้แสดงผลนั่นล่ะครับ

[koraman]

ทำไม่ได้จริงๆ ครับ   

[zankumuro]

มีลิงก์จะดีมากครับ จะได้ช่วยดูว่าผิดตรงไหน

[koraman]

http://www.power3.comlu.com   ครับ   

เหมือนมันจะโหลด font ได้แล้ว  แต่ตรง Top Menu มันไม่แสดงผลเป็น font ที่ set เอาไว้ครับ
แต่ดันไปเปลี่ยนตรงหัวข้อแทน เช่นคำว่า Main Menu, Login  (คือตัวอักษรที่ต้องการใช้ใน Top Menu)

[koraman]

ผมเอา script ด้านล่างไปว่างใน index.php ของ template ที่ใช้อยู่

<script src="http://cdnjs.cloudflare.com/aj.../libs/cufon/1.09i/cufon-yui.js " type="text/javascript"></script>
<script src="css/fonts/DB_Ozone_X_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon('h1', {
     color: '-linear-gradient(#b7dded, 0.2=#70ceef, 0.5=#20b4e2, #b1dbeb)'
});
Cufon('h3');
</script>


----------------------------------------------------------

ตามความเข้าใจผมต้องแก้ ตรง Cufon('ตำแหน่ง??');   ใช่มั้ยครับ
แล้วถ้าตำแหน่งเยอะจะใส่ยังไงดี


----------------------------------------------------------
ตำแหน่งของ font ที่ต้องการเปลี่ยนทั้งหมดใน template ครับ

.art-postcontent h1
.art-blockcontent h1
.art-postcontent h1 a, .art-postcontent h1 a:link, .art-postcontent h1 a:hover, .art-postcontent h1 a:visited, .art-blockcontent h1 a, .art-blockcontent h1 a:link, .art-blockcontent h1 a:hover, .art-blockcontent h1 a:visited
.art-postcontent h2
.art-blockcontent h2
.art-postcontent h2 a, .art-postcontent h2 a:link, .art-postcontent h2 a:hover, .art-postcontent h2 a:visited, .art-blockcontent h2 a, .art-blockcontent h2 a:link, .art-blockcontent h2 a:hover, .art-blockcontent h2 a:visited
.art-postcontent h3
.art-blockcontent h3
.art-postcontent h3 a, .art-postcontent h3 a:link, .art-postcontent h3 a:hover, .art-postcontent h3 a:visited, .art-blockcontent h3 a, .art-blockcontent h3 a:link, .art-blockcontent h3 a:hover, .art-blockcontent h3 a:visited
.art-postcontent h4
.art-blockcontent h4
.art-postcontent h4 a, .art-postcontent h4 a:link, .art-postcontent h4 a:hover, .art-postcontent h4 a:visited, .art-blockcontent h4 a, .art-blockcontent h4 a:link, .art-blockcontent h4 a:hover, .art-blockcontent h4 a:visited
.art-postcontent h5
.art-blockcontent h5
.art-postcontent h5 a, .art-postcontent h5 a:link, .art-postcontent h5 a:hover, .art-postcontent h5 a:visited, .art-blockcontent h5 a, .art-blockcontent h5 a:link, .art-blockcontent h5 a:hover, .art-blockcontent h5 a:visited
.art-postcontent h6
.art-blockcontent h6
.art-postcontent h6 a, .art-postcontent h6 a:link, .art-postcontent h6 a:hover, .art-postcontent h6 a:visited, .art-blockcontent h6 a, .art-blockcontent h6 a:link, .art-blockcontent h6 a:hover, .art-blockcontent h6 a:visited


----------------------------------------------------------------------------------

[zankumuro]

ต้องปรับใน javascript ครับ รูปแบบมันคือ

Cufon(section);

เพราะตัวอย่างที่ให้ไป มันจะเปลี่ยน h1 กับ h3

ลอง

โค๊ด:

<script type="text/javascript">
Cufon('.art-hmenu li a'});
</script>

[koraman]

ได้แล้วครับ (พอดีเว็บที่ใช้จริงๆ อยู่ใน intranet ของที่ทำงาน  ก็เลยไม่ได้อัปลงเว็บที่ให้ไปหลังใส่สคริปนี้)

<script type="text/javascript">
Cufon('.art-hmenu');
</script>

ขอบคุณมากๆ ครับ