解決 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 文件中，而非整套字型。這個作法可以有效降低生成文件的大小。