# ビューアのフォント使用

## デザイナーでのフォント設定

以下に示すように、コンポーネントのフォントを選択できます。 フォント選択コンボボックスには、コンピューターにインストールされているすべてのフォントが表示されます。 \
ここでは、黄色のコンポーネントのフォントがNoto Sansに設定されています。

![](https://1097513732-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwWWN-Gla4aA9ONdCK6%2F-MGfOwFKRod9MQKAGg-0%2F-MGgrGxhEI0Mu8PivBAL%2Fimage.png?alt=media\&token=7114fcd0-a7c5-404e-ba17-e843996cd1fb)

## ビューアのフォントインストール

### バインディングタイプ

#### クライアントバインディング

OZビューアがクライアントコンピュータで実行されると、OZビューアはクライアントコンピュータにインストールされているフォントを使用します。

#### サーバーバインディング

ビューアがOZサーバーまたはスケジューラによってサーバーで実行されると、ビューアはサーバーにインストールされているフォントを使用します。

### ビューアタイプ

#### ActiveXビューア

* クライアントバインディングのみーActiveXビューアはWindowsでのみ実行されます。
* &#x20;OZRで使用されるフォントは、Windowsにインストールする必要があります。

#### HTML5 Canvasビューア

* クライアントバインディングーOZRで使用されるフォントは、HTML5 Canvasビューアを実行するクライアントにインストールする必要があります。
* サーバーバインディングー以下のサンプルコードに示すように、サーバーにフォントが埋め込まれたOZRをPDFにエクスポートする場合、OZRで使用されるフォントをサーバーにインストールする必要があります。

```javascript
var opt = []; opt["save_exportfrom"] = {"pdf":"server"}; 
start_ozjs("OZViewer","http://127.0.0.1:8080/HTML5viewer/",opt);
```

#### HTML5 Svgビューア

* サーバーバインディングとクライアントレンダリング
* サーバー上のOZ Manager Serverはe-formをSVGにバインドし、それをクライアントに送信します。
* フォントはサーバーとクライアントの両方にインストールする必要があります。

#### Appletビューア

* サーバー上のOZサーバーまたはOZスケジューラサーバーによるサーバーバインディングのみ
* フォントはサーバーにインストールする必要があります。 代替フォントの設定

## 代替フォントの設定

サーバーまたはクライアントにOZRフォントがインストールされていない場合は、フォントパラメーターを使用して代替フォントを設定できます。

| **パラメーター**                      | **説明**                                                                                                                                                                           |
| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| font.fontnames                  | <p>フォントエイリアス名を設定</p><p>oz.sendToActionScript("font.fontnames", "font1,font2");</p>                                                                                               |
| font._fontname._&#x6E;ame       | <p>エイリアスのフォント名を設定</p><p>oz.sendToActionScript("font.font1.name", "roboto");</p>                                                                                                  |
| font._fontname._&#x75;rl        | <p>フォントをロードするURLを設定（HTML5ビューアでは使用できません）</p><p>oz.sendToActionScript("font.font1.url","<a href="http://hostname/webfont/Roboto.eot">http://hostname/webfont/Roboto.eot</a>");</p> |
| font._fontname_.allowedurl      | font.fontname.urlへのアクセスを許可するクライアントURLを設定します。 （ActiveXビューアのみ）                                                                                                                     |
| font._fontname_.alternativefont | <p>フォントの代替フォントを設定する</p><p>oz.sendToActionScript("font.font1.alternativefont", "calibri");</p>                                                                                    |
| font._fontname_.replacefont     | <p>フォントの置換フォントを設定する</p><p>oz.sendToActionScript("font.font1.replacefont", "Verdana");</p>                                                                                        |

## PDFへのフォント埋め込み

OZRで使用されているフォントをPDFファイルに埋め込んでエクスポートする場合は、サーバーにフォントのTrueType形式をインストールしてから、スクリプトで以下のオプションを使用します。

```javascript
param.put("pdf.fontembedding", "true"); // すべてのフォントを埋め込む
param.put("pdf.fontembedding_subset", "true"); // 選択されたフォントのみ埋め込む
/* to set pdf.fontembedding_subset to true,
pdf.fontembedding must also be set to true. */
```

## ウェブフォント使用

HTML5 Canvas Viewerを使用してクライアントにOZRフォントがインストールされていない場合、Webフォントを使用できます。 ビューアがWebフォントを使用してOZRを開いた場合でも、OZRをPDFにエクスポートするには、OZRのフォントをサーバーにインストールしてサーバーバインドする必要があります。

{% hint style="warning" %}
以下のようにOZビューアを開く前に、すべてのWebフォントがロードされていることを確認してください。
{% endhint %}

```javascript
<!DOCTYPE html>
<html style="height:100%">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css"/>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="../HTML5viewer/ui.dynatree.css" type="text/css"/>
<script type="text/javascript" src="/oz/HTML5viewer/jquery.dynatree.js" charset="utf-8"></script>
<script type="text/javascript" src="/oz/HTML5viewer/OZJSViewer.js" charset="utf-8"></script>
<script type="text/javascript" src="/oz/HTML5viewer/jQuery-FontSpy.js" charset="utf-8"></script>
<style>
@font-face {
font-family: 'Roboto';
src: url('/oz/HTML5viewer/Roboto-Regular-webfont.eot');
src: url('/oz/HTML5viewer/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/oz/HTML5viewer/Roboto-Regular-webfont.woff') format('woff')
url('/oz/HTML5viewer/Roboto-Regular-webfont.ttf') format('truetyp
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body style="width:98%;height:98%">
<div id="OZViewer" style="width:98%;height:98%"></div>
<script type="text/javascript" >
var serverUrl = "http://" + location.host;
function SetOZParamters_OZViewer(){
var oz = document.getElementById("OZViewer");
oz.sendToActionScript("connection.servlet",serverUrl + "/oz/server");
oz.sendToActionScript("information.32 debug", "true");
oz.sendToActionScript("connection.reportname","/samples/customer.ozr");
oz.sendToActionScript("odi.odinames", "customer");
return true;
}
fontSpy('Roboto', {
success: function() {
consol.log('Font has been loaded');
var opt=[];
opt["save_exportfrom"] = {"pdf":"server"};
start_ozjs("OZViewer", serverUrl + "/oz/HTML5viewer/". opt);
},
failure: function() {
consol.log('Font failed to load');
}
});
</script>
</body>
</html>
```
