shopify主題設定自定義字型

2022-07-20 08:51:13 字數 1054 閱讀 1088

shopify的主題一般使用google字型或者shopify內建的字型。但有時候這些字型不符合我們的需求,我們就需要自定義主題的字型了。各個主題的自定義字型的方式可能不太一樣,我有在網上看到一篇自定義字型的文章,忘記是誰寫的了,應該是有效的,但好像不適用於我的這個主題,我也沒有進行嘗試,不知道效果。反正最後我是按照自己的方式設定了自定義字型了,在這裡記錄一下。

因為我這主題的字型設定是勾選選擇應用google字型或者shopify字型,所以,我想再新增乙個判斷條件,選擇自定義字型。

首先,在「config」的「setting_schema.json」檔案中找到「typography」下的大概「shopify fonts」的下乙個位置,這個隨意了,放在最後也行,輸入以下**,新增單選按鈕以及輸入框。儲存之後,在「typography」的下面會出現以下的內容。

然後,在這個主題的theme.liquid檔案中有一段**是進行字型的選擇的。我複製了這段**然後進行了一些修改。

然後,需要上傳文字檔案到」settings」->」file」,複製字型的url。

然後在theme.css.liquid的檔案裡新增以下**,載入字型。

這樣操作之後,我們勾選「custom font」後,font-family的名稱就進行了更改,替換了字型。

自定義主題

element 預設提供一套主題,css 命名採用 bem 的風格,方便使用者覆蓋樣式。我們提供了三種方法,可以進行不同程度的樣式自定義。element 的 theme chalk 使用 scss 編寫,如果你的專案也使用了 scss,那麼可以直接在專案中改變 element 的樣式變數。新建乙個樣...

vant自定義主題

vant 但是如果這樣的話,自定義檔案的路徑是絕對路徑,需要改為相對路徑 參考這裡 在vue.config.js中新增以下 沒有的話自己建立 const path require path const mytheme path.resolve dirname,src assets style myt...

自定義ExtJS主題

extjs提供的可以使用的主題包對於建立乙個乾淨專業的程式來說已經很有創意了,然而,你可能還是會希望提供自己的一種設計方式或現在存在的企業設計方式。從歷史上來說,給程式美化就是指的給html標籤提供渲染元件的規則,但是這樣做也會有一些弊端出現。首先,你需要負擔的是各種支援的瀏覽器。其次,隨著框架的成...