看這篇以前請先看在WordPress + Elementor上使用中文字型(一)

理論上,不管是哪一個widget,在Elementor的【進階】的【CSS類別】欄位中設定預先寫好的CSS類別就應該可以達到我們的需求。就像在上一篇文章中更改本文編輯器Widget的中文字形一樣。但是在這個版本的Elementor中,在標題和按鈕等Widget的CSS類別中套用自訂類別並不能起到作用,似乎被其他類別override掉了,這應該是在版本更迭中產生的bug,希望後續的改版能夠修正這個錯誤。

因此我們使用另一個方式來修正標題以及按鈕的中文字形,這裡需要更高階一點的CSS技能。

首先我們打開編輯好的網頁,然後在上方的控制列上選擇【自訂】選項,

然後點開【附加的CSS】,會出現下面的畫面

然後再按下F12打開chrome developer tools,使用滑鼠右鍵點擊標題部分文字,選擇【檢查(N)】,可以將標題部分的html以及CSS標示出來

然後再右下Styles欄位中找到有font-family標籤的內容將他拷貝下來,貼在左邊的【附加的CSS】內。同時將這裡預設的字形改成圓體(cwTexYen),顏色則隨意或是可以刪掉,之後還可以在Elementor的設定中調整。

這時就可以直接看到標題文字字形的改變

按下【發表】後就完成中文字形的修改,按鈕的部分作法也是一樣你們也可以自行測試。不過這樣的修改是全域的修改,所以整個網站的標題的中文字形以及按鈕的中文字形就都被固定下來了,碰到如果有兩個按鈕想要使用不同字形時就不適合使用這個方式。

最後的成果以及加上去的CSS,其中標題顏色是由Elementor Widget選單中再次修改所得到

 

備註:這些修改是跟著Theme一起的,如果變更了Theme,自訂的CSS需要重新輸入一次喔。

2018/05/27 補充

如果在貼上包含有字型的CSS程式碼以後網頁字型還是沒有更改,則在css類別前面增加body區塊選擇器,用來提高CSS的優先權


body .elementor-widget-heading .elementor-heading-title {
font-family: 'cwTexYen', Sans-serif;
font-weight: 600;
}

body .elementor-widget-button a.elementor-button, .elementor-widget-button .elementor-button {
font-family: "cwTexFangSong", Sans-serif;
font-weight: 500;
}

This Post Has 2 Comments

  1. 小雨

    感谢您的攻略,最后一个终于成效了!

    1. hhliu

      很高興對你有用,也蠻抱歉的自己的網站自己也很少上來看

發佈留言