November 3, 2017

プログラムソース用WebフォントSource Code Proを使う

このサイトは基本的なNoto Sansを使っています が、英数字、ひらがな、カタカナだけ別のフォントを指定して雰囲気を変えて見ました。

そうすると、ソースコードが見にくくなってしまったので、コード部分にはSource Code Proを使用するよう変更して見ました。

Source Code Pro とは

Source Code Proは、Adobe が開発し2012年に発表したソースコード表示用のフォントです。

ソースコードの可読性を上げるため、I(アイ)、小文字のl(エル)、数字の1(イチ) 、数字の0(ゼロ)、O(オー)など他のフォントでは紛らわしいものを区別しやすくデザインしています。

当然モノスペースでインデントが揃うようになっており、ソースコードが把握しやすくなります。

以下は、ソースコードの例です。

#!/usr/bin/python

# Print the contents of the files listed on the command line.

import sys

for fn in sys.argv[1:]:
    try:
        fin = open(fn, 'r')
    except:
        (type, detail) = sys.exc_info()[:2]
        print "\n*** %s: %s: %s ***" % (fn, type, detail)
        continue
    print "\n*** Contents of", fn, "***"
    
    # Print the file, with line numbers.
    lno = 0
    while 1:
        line = fin.readline()
        if not line: break;
        print '%3d: %-s' % (lno, line[:-1])
        lno = lno + 1
    fin.close()
print

どうでしょう? 読みやすくないですか?

設定方法

Adobe Edge Web Fontsか、Google FontsでSource Code Proの導入の設定を行います。 フォントを使用するためのスタイルシートやJavascriptを生成してくれます。

それをそのまま自分のWebサイトの設定に加えます。

Googleを使う場合、以下のようなコードが提示されるはずです。

<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">

あとはスタイルシートに以下のような指定を加えるだけです。(AdobeとGoogleでは設定で示される Font Family名が違いますので注意ください)

font-family: 'Source Code Pro', monospace;

関連リンク

© 沙門