Googleフォントウェブフォントでスタイル付きのユニコードの矢印が表示されない

Question

ウェブページでフォントソースコードを使用しようとしています。また、specimen pageの華やかな矢印が表示されています。

Googleフォントを使用してページにフォントを含めていますが、矢印はits respective pageには表示されません。しかし、標本ページから矢印をコピー/ペーストするか、またはhtmlarrows.comと思っているように見えます。

Googleフォントでフォントを使用すると、他のテキストはすべてソースコードプロになりますが、矢印はデフォルトでシステムのデフォルトフォント（Arial for me）に戻ります。ここで

は一例です：

@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro'); 
 

 
.container { 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    font-size: 96px; 
 
} 
 

 
td, th { 
 
    border: 0.1rem solid #c3c3c3; 
 
    padding: 0.5rem; 
 
} 
 

 
.row-sans-serif { 
 
    font-family: sans-serif; 
 
} 
 

 
.row-source-code-pro { 
 
    font-family: 'Source Code Pro', sans-serif; 
 
}

<table class="container"> 
 
    <thead> 
 
    <tr> 
 
     <th>font-family</th> 
 
     <th>A</th> 
 
     <th>Left</th> 
 
     <th>Right</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="row-sans-serif"> 
 
     <th>sans-serif</th> 
 
     <td>A</td> 
 
     <td>&#8592;</td> 
 
     <td>&#8594;</td> 
 
    </tr> 
 
    <tr class="row-source-code-pro"> 
 
     <th>Source Code Pro</th> 
 
     <td>A</td> 
 
     <td>&#8592;</td> 
 
     <td>&#8594;</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

私はGoogleのフォントサイト上の私のバンドルにフォントを追加すると、それは切り替え、私はLatinバージョンまたはLatin Extendedバージョンをインポートすることができます拡張バージョンへの変更は、私の使用事例では何も変わっていないようです。

私は @importから <link>にフォントをインポートする方法を変更しようとした

、私は←または←にUnicode文字を参照する方法を変更しようとした、何もトリックを行うように思いません。

Answer 1

フォントにインポートされているURL：https://fonts.googleapis.com/css?family=Source+Code+Proをロードすると、@font-faceが定義されていて、unicode-rangeが設定されていることがわかります。この範囲には、矢印が存在するU + 02190-U + 02199は含まれません。

これはGoogleのAPIを最適化したものです。 documentationには、基本範囲を超えるために渡すことができるオプションのsubsetパラメータがあると記載されています。これは、Latin extendedチェックボックスをオンにしたときにGoogleフォントジェネレータがURLに追加するのと同じ属性です。

矢印のユニコード範囲を返す定義済みsubsetが見つかりません。しかし、textと呼ばれる別のオプションのパラメータがドキュメントに記載されています。 textは、渡された特定の文字を処理できる@font-faceのみを返します。

textはこれらのものに限定されているので、矢印の横に基本フォントLatinを返すようにGoogleフォントを設定する方法は見つかりませんでした。これは、Google Fonts APIに欠けているか、既に存在する場合はそれほど文書化されていないようです。

回避策として、importsをダブルアップし、text=←|→（ただし、最初に文字をエンコードするURL）の2つを追加することができます。これは2つのグリフのためだけに別の全体的な往復を追加するので、これは素晴らしいことではないことに注意してください。

例：

@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro'); 
 
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro&text=%E2%86%90|%E2%86%92'); 
 

 
.container { 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    font-size: 96px; 
 
} 
 

 
td, th { 
 
    border: 0.1rem solid #c3c3c3; 
 
    padding: 0.5rem; 
 
} 
 

 
.row-sans-serif { 
 
    font-family: sans-serif; 
 
} 
 

 
.row-source-code-pro { 
 
    font-family: 'Source Code Pro', monospace; 
 
}

<table class="container"> 
 
    <thead> 
 
    <tr> 
 
     <th>font-family</th> 
 
     <th>A</th> 
 
     <th>Left</th> 
 
     <th>Right</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="row-sans"> 
 
     <th>sans-serif</th> 
 
     <td>A</td> 
 
     <td>&#8592;</td> 
 
     <td>&#8594;</td> 
 
    </tr> 
 
    <tr class="row-source-code-pro"> 
 
     <th>Source Code Pro</th> 
 
     <td>A</td> 
 
     <td>&#8592;</td> 
 
     <td>&#8594;</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

また、私の具体的なユースケースに同じフォントがAdobeのTypekitを通じて供給されます。 Typekitを使ってWebフォントを埋め込むとうまくいきます。