如何在Magento網站中新增字型?

Astral WebBy Astral Web 4 years agoNo Comments
首頁  /  Magento  /  Magento開發  /  如何在Magento網站中新增字型?

Magento網站內建許多基本字型,對一般網站來說相當夠用;但由於使用者為各種類型的購物網站,有些商家可能會有特殊字型的需求,讓網站更有特色。例如童裝網站也許會需要活潑的字型,以符合品牌形象。今天Astral Web要教大家如何在Magento網站中新增自己想要的字型,由於會動到程式碼所以此篇教學適用於有程式背景的朋友操作,對普通使用者來說較為困難。

如果看不慣文章,歡迎參考我們的教學影片:

首先,大多數Magento的頁面都是由CMS系統所控制的,所以我們要先在Magento後台的CMS系統中加入我們所想要的字型,我們以Magento預設頁面「About us關於我們」為示範教學,在此頁面新增「Century Gothic」字型。

Magento教學:新增字型

由於Magento後台中的WYSIWYG是使用tinyMce的套件,要先編輯以下檔案:

Magento安裝目錄/js/tiny_mce/themes/advanced/editor_template.js

Magento教學:新增字型

找到檔案之後尋找關鍵字「theme_advanced_fonts」,在文件中會得到三個結果,但我們需要的是後面接著字型列表以及CSS字元代碼的區段。

Magento教學:新增字型

在列表中加入 Century Gothic=century-gothic;  這段程式代碼,接著儲存後重新整理頁面。

Magento教學:新增字型

接著可看到我們新增的字型已出現在WYSIWYG的字型列表中,但這樣還沒完成,即使切換字型也不會有所更動,這是因為我們只有加入列表文字,並沒有把真正的Css與字型檔加入網頁中,所以下一步就是要加入CSS及字型檔。

首先請至下列資料夾:

Magento安裝目錄/js/mage/adminhtml/wysiwyg/tiny_mce/themes/advanced/skins/default/

編輯目錄中的content.css,加入下列編碼:

@font-face {

font-family: ‘century-gothic’;

src: url(‘fonts/century-gothic.eot’);

src: url(‘fonts/century-gothic.eot’) format(’embedded-opentype’),

url(‘fonts/century-gothic.ttf’) format(‘truetype’);

font-weight: normal;

font-style: normal;

}

Magento教學:新增字型

再將字型檔加入對應的目錄中。

Magento教學:新增字型

如此即可完成後台字型的新增,接著要在前台增加CSS與字型檔。

請先至下列資料夾:

Magento安裝目錄/js/mage/adminhtml/wysiwyg/tiny_mce/themes/advanced/skins/default/

編輯目錄中的styles.css,加入下列編碼:

@font-face {

font-family: ‘century-gothic’;

src: url(‘fonts/century-gothic.eot’);

src: url(‘fonts/century-gothic.eot’) format(’embedded-opentype’),

url(‘fonts/century-gothic.ttf’) format(‘truetype’);

font-weight: normal;

font-style: normal;

}

Magento教學:新增字型

接著再將字型檔加入對應的目錄中。

Magento教學:新增字型

接著清除Cache後重整頁面,就會看到新增的字型顯示於Magento網站了!

Magento教學:新增字型

相信此篇教學對有程式背景的朋友來說不會太難,有興趣的朋友可以試看看喔!若有Magento相關需求歡迎聯絡我們,用我們的專業給你最安心的服務!

想了解更多Magento教學?

請點選Magento教學導覽索引,幫助您快速找到需要資訊!

Astral Web編寫製作

 

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  Magento開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。