• 0

解決 WooCommerce PDF Invoices 中文缺字問題

安裝外掛 WooCommerce PDF Invoices 後,會發現它所生成的 PDF 文件無法顯示中文,而衹會顯示一堆方格、空白或亂碼。原因是該外掛所默認的字型,並不包含漢字字符。解決此一問題的方法,在於修改(子)主題當中的外掛 CSS 檔。

1.

首先將  wp-content/plugins/woocommerce-pdf-invoices-packing-slips/templates/Simple/ 內的檔案,全部複製到(子)主題中的以下路徑:

wp-content/themes/my-(child)theme-folder/woocommerce/pdf/my-template/

路徑中粗體字的部分自行命名。

2.

再來創建一個檔案夾 fonts/,並將自選的中文字型上傳到其中。注意,這裏衹支援 TTF 字型檔。

3.

打開 my-template 中的在 style.css 文件,並添加以下樣式:

/* 加載中文字型 */
@font-face {
font-family: 'myFont';
font-style: normal;
font-weight: normal;
src: local('myFont'), local('myFont'), url(<?php echo $this->get_template_path(); ?>/fonts/myfont.ttf) format('truetype');
}
@font-face {
font-family: 'myFont';
font-style: normal;
font-weight: bold;
src: local('myFont Bold'), local('myFont-Bold'), url(<?php echo $this->get_template_path(); ?>/fonts/myfont-bold.ttf) format('truetype');
}
@font-face {
font-family: 'myFont';
font-style: italic;
font-weight: normal;
src: local('myFont Italic'), local('myFont-Italic'), url(<?php echo $this->get_template_path(); ?>/fonts/myfont-italic.ttf) format('truetype');
}
@font-face {
font-family: 'myFont';
font-style: italic;
font-weight: bold;
src: local('myFont Bold Italic'), local('myFont-BoldItalic'), url(<?php echo $this->get_template_path(); ?>/fonts/myfont-bolditalic.ttf) format('truetype');
}

再將 font-family: ‘myFont’ 指派給同文件中的 body 標籤:

body {
font-family: 'myFont';
}

4.

進入外掛後台,在 Choose a template 中選取剛剛創建好的模板(my-template),啟用後便解決了中文顯示的問題。

務必記得,在 General settings 下勾選 Enable font subsetting。啟動這一選項後,衹有實際使用的字符會被嵌入 PDF 文件中,而非整套字型。這個作法可以有效降低生成文件的大小。

0

購物車

loader