簡単電子レシート receiptline で Web フォントを使ってみた

[前回](https://qiita.com/dopperi46/items/8d3284c74869e66dca44)は、変換ライブラリに手を加えて、紙レシートの行間隔を調整しました。
今回は、紙ではなく電子レシートのフォントを変更してみようと思います。

# 標準のフォント

[ReceiptLineをCLIでSVG変換](https://qiita.com/eggplants/items/2bf47a318f688e6a0af5)のコマンドラインツールを使って SVG に変換します。

```bash
$ ./rltosvg 32 cp932 receipt.txt receipt.svg
```

**入力データ**

```text:receipt.txt
{image:iVBORw0KGgoAAAANSUhEUgAAAIAAAAAwAQMAAADjOuD9AAAABlBMVEUAAAD///+l2Z/dAAAAZklEQVQoz2P4jwYYRrrABwYGOwYG5gMMDBUMDPxAgQcMDDJAgQYGhgJcAv//yMj//9/8//+HerAZRAsAzUASAJoGMhRF4AC6ANCIAhQz8AkAXQoUOIDidBQBkG8hAj8gAqPJAa8AAGjulhOsX97yAAAAAElFTkSuQmCC}
            市ヶ谷駅前店
    東京都千代田区九段1-Y-X

2019年 2月19日(火) 19:00
{border:line}
^領　収　証
{border:space}
{width:*,2,10}
ビール                 | 2|    ¥1,300
千鳥コース             | 2|   ¥17,280
-------------------------------------
{width:*,20}
^合計             |          ^¥18,580
現　　金          |           ¥20,000
お 釣 り          |            ¥1,420
```

**出力データ**

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/ff994da9-bf4e-b715-9c0e-7361bc4f1460.png)

出力データのフォント指定部分です。  

```xml:receipt.svg
<g font-family="'MS Gothic', 'San Francisco', 'Osaka-Mono', 'Courier New', 'Courier', monospace" fill="#000" font-size="24" dominant-baseline="text-after-edge">
```

Windows では「ＭＳ ゴシック」、Mac では「San Francisco」、他の環境ではデフォルトの等幅フォントで表示されると思います。  
異なる環境で表示を合わせるには、ビットマップ画像に変換するか、フォントを手作業でインストールしなければなりません。  

# Web フォントに変更

フォントのインストール作業を回避する方法があります。
そう、Web フォントです。ここでは Google Fonts を使います。
https://fonts.google.com/

変換ライブラリ `lib/receiptline.js` を変更します。

- \<style\> を追加
- font-family を変更
- font-size を調整

以下は変更部分の抜粋です。フォントは「Kosugi Maru」を指定しています。

```javascript:lib/receiptline.js
//
// SVG
//
const _svg = {
    ...
    // start printing:
    open: function (printer) {
        ...
        this.fontFamily = "'Kosugi Maru', monospace";
        return '';
    },
    // finish printing:
    close: function () {
        const style = '<style>@import url("https://fonts.googleapis.com/css2?family=Kosugi+Maru&amp;display=swap");</style>';
        const fontSize = 24;
        return `<svg width="${this.svgWidth}px" height="${this.svgHeight}px" viewBox="0 0 ${this.svgWidth} ${this.svgHeight}" preserveAspectRatio="xMinYMin meet" ` +
            `xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">` +
            `<defs>${style}<filter id="receiptlineinvert" x="0" y="0" width="100%" height="100%"><feFlood flood-color="#000"/><feComposite in="SourceGraphic" operator="xor"/></filter></defs>` +
            `<g font-family="${this.fontFamily}" fill="#000" font-size="${fontSize}" dominant-baseline="text-after-edge">${this.svgContent}</g></svg>\n`;
    },
    ...
};
```

フォントをいろいろ変えて、コマンドラインツールで変換してみます。  

## Kosugi Maru

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/52b333bc-abc2-1b2f-58ef-1441848a28ca.png)

- style
  - `<style>@import url("https://fonts.googleapis.com/css2?family=Kosugi+Maru&amp;display=swap");</style>`
- font-family
  - `'Kosugi Maru', monospace`
- font-size
  - `24`

## Kosugi

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/b96dbe7a-8c2a-a2d9-3981-983c9e439cee.png)

- style
  - `<style>@import url("https://fonts.googleapis.com/css2?family=Kosugi&amp;display=swap");</style>`
- font-family
  - `'Kosugi', monospace`
- font-size
  - `24`

## Sawarabi Mincho

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/fa278f1c-ff56-fab4-65b0-d93286284163.png)

- style
  - `<style>@import url("https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&amp;display=swap");</style>`
- font-family
  - `'Sawarabi Mincho', monospace`
- font-size
  - `20`

## Ubuntu Mono & Kosugi Maru

![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/893420c6-2628-0713-4908-e578bf3b8c94.png)

- style
  - `<style>@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono&amp;family=Kosugi+Maru&amp;display=swap");</style>`
- font-family
  - `'Ubuntu Mono', 'Kosugi Maru', monospace`
- font-size
  - `24`

## Cutive Mono & Noto Serif JP (Extra-light 200)

![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/3a6e82a1-bfbd-03c7-c612-b563df24a43e.png)

- style
  - `<style>@import url("https://fonts.googleapis.com/css2?family=Cutive+Mono&amp;family=Noto+Serif+JP:wght@200&amp;display=swap");</style>`
- font-family
  - `'Cutive Mono', 'Noto Serif JP', monospace`
- font-size
  - `22`

## Amatic SC (Bold 700) & Noto Sans JP (Thin 100)

![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/c545e404-af93-3cb0-b650-11d036169e7e.png)

- style
  - `<style>@import url("https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&amp;family=Noto+Sans+JP:wght@100&amp;display=swap");</style>`
- font-family
  - `'Amatic SC', 'Noto Sans JP', monospace`
- font-size
  - `22`

# 開発ツールに適用 (追記)

変更した `lib/receiptline.js` を `designer/script/receiptline.js` にコピーすると、開発ツールのプレビューも Web フォントで表示されます。

![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/2dd46b16-1487-1591-7e57-874ab205a2e2.png)

# まとめ

最適なフォントは、日本語は「Kosugi Maru」「kosugi」、英語は「Ubuntu Mono」でした。
monospace であっても縦横比 2 : 1 のフォントは少ないです。

等幅フォント・全角・半角・倍角は、今や絶滅危惧種。
レシートプリンターは、初期のワープロの生きた化石です。