Look! atlaswu
0 Shopping Cart
WorldWideWeb

WooCommerce PDF Invoices 顯示中文

1 Min Read In WorldWideWeb

記錄一下在 WooCommerce PDF Invoices 產生的PDF中，正常的顯示中文

官方文件中已經完整說明如何設定及安裝中文字型，一開始我用OpenAI 和 google 到的資訊照做並沒有成功，後來回頭才發現AHAO他的教學網頁有部分的文字內容變成背景色而隱藏了，所以錯過了一些修改程序，這篇自己寫下來也當作紀錄。

wp-content/plugins/woocommerce-pdf-invoices-packing-slips/templates/Simple

上述位置是官方的原始佈景檔，整個複製一份到下列的位置，並改個檔案夾名稱。

wp-content/themes/theretailer-child（子佈景）/woocommerce/pdf/new-template-name

這個給PDF Invoices用的佈景設置檔因為放在「WordPress子佈景」，日後外掛若有更新過，不會影響到你變更過的內容。如果沒有使用子佈景的人，其實也可以直接對Simple內容作修改，不過外掛更新後有可能受到影響，所以較不建議。

若是不放子佈景，也不直接改Simple內容的話，這篇可以是在function.php裡面改，也是另一種做法。

從Simple複製成new-template-name這個檔案夾裡面，自行新增fonts檔案夾，從google下載下來的Noto_Sans_TC 字體，將NotoSansTC-Regular.ttf和NotoSansTC-Bold.ttf這兩個不同字重的字體放入到fonts內。

編輯new-template-name這個檔案夾的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/NotoSansTC-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'MyFont';
    font-style: normal;
    font-weight: bold;
    src: local('MyFont'), local('MyFont'), url(<?php echo $this->get_template_path(); ?>/fonts/NotoSansTC-Bold.ttf) format('truetype');
}

同樣是style.css，原先就有對 Body 定義的樣式，將上面加入的MyFont字型加入到 Body內（font-family: ‘Open Sans’, ‘MyFont’, sans-serif;），讓中文字體可以正確在 Body 內呈現。

body {
	background: #fff;
	color: #000;
	margin: 0cm;
	font-family: 'Open Sans', 'MyFont', sans-serif;
	/* want to use custom fonts? http://docs.wpovernight.com/woocommerce-pdf-invoices-packing-slips/using-custom-fonts/ */
	font-size: 9pt;
	line-height: 100%; /* fixes inherit dompdf bug */
	overflow-wrap: anywhere;
}

回到WordPress後台，WooCommerce下 PDF Invoice 設置項目內，第一個General裡面，先將佈景 Choose a template 改成剛剛複製過來的 new-template-name。

然後下面一點 Enable font subsetting 記得要勾選，讓pdf生成時只會內嵌有文件內使用到的中文字，節省PDF檔案大小。

Related Posts