Q&A
Webフォントのあずきフォントが、Chromeだと反映されるのですが、IEだと反映されません。
ttfをeotに変換するのでしょうか。
あいにくhttps://ttf2eot.sebastiankippe.com/
ttfをeotに変換するサイトが閉鎖しております。
https://www.fontsquirrel.com/tools/webfont-generator
こちらのサイトで試したのですが、
azuki-webfont.eotを開こうとしたら、
「このファイルを開けません」というエラーがでてしまいます。
ご教示ください
php:test26.php
1 2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4<html xm1ns="http://www.w3.org/1999/xhtml"> 5<html lang="ja"> 6<head> 7<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 8<meta http-equiv="Content-Script-Type" content="text/javascript"> 9 10 11<title>Contact</title> 12<style type="text/css"> 13<!-- 14html,body { 15scrollbar-arrow-color:#ffccff; 16scrollbar-face-color:#ffcccc; 17scrollbar-3dlight-color:#ffffff; 18scrollbar-darkshadow-color:#ffcccc; 19scrollbar-highlight-color:#ff9999; 20scrollbar-shadow-color:#ff9999; 21scrollbar-track-color:#ffffff; 22} 23--> 24body{ 25 font-family: あずきフォント; 26} 27p#submit_btn { 28 text-align: center; 29} 30.fontButton{ 31 text-align: center; 32 33} 34.content { 35 margin-left: 137px; 36 margin-top: 0px; 37 font-size: 95%; 38 font-weight: bold; 39 font-family: あずきフォント; 40 color: #6c2735; 41} 42 43.form { 44 color: white; 45 background-color: #f7c2c2; 46 text-align: center; 47 /* padding-left: 370px; */ 48 padding-top: 5px; 49 padding-bottom: 5px; 50 font-weight: bold; 51 font-size: 95%; 52 width: 825px; 53 font-family: あずきフォント; 54} 55 56.textform { 57 margin-left: 68px; 58 font-family: あずきフォント; 59} 60 61.textform_postalCode { 62 margin-left: 30px; 63 font-family: あずきフォント; 64} 65 66.textstyle{ 67 font-size: 95%; 68 font-weight: bold; 69 font-family: あずきフォント; 70 color: #6c2735; 71/* font-family: "あずきフォント", sans-serif; */ 72} 73.required { 74 font-size: 87%; 75 font-weight: normal; 76 color: red; 77 font-family: あずきフォント; 78} 79#heading{ 80 border-left: 10px solid black; 81 border-bottom: medium solid black;; 82/* font-family: "あずきフォント", sans-serif; */ 83 font-family: あずきフォント; 84 color: #6c2735; 85} 86/* 送信ボタン - 押せないとき 機能する*/ 87button[type="button"][disabled] { 88 background-color: #ccc; 89 cursor: default; 90 font-family: あずきフォント; 91 text-align: center; 92} 93/*検索ボタン*/ 94button[type="button"] { 95 background: #f7c2c2; 96 color: white; 97 /* width: 55px; */ 98 height: 30px; 99 border: 0; 100 line-height: 30px; 101 font-family: "あずきフォント"; 102 text-align: center; 103/* padding: 10px; */ 104} 105/* 機能する */ 106button[type="button"]:hover { 107 background: #ff9b9f; 108 height: 30px; 109 color: #fff; 110 border: 0; 111 cursor: pointer; 112 font-family: "あずきフォント"; 113 text-align: center; 114} 115@font-face { 116font-family: あずきフォント; 117src: url(azuki.ttf) format("truetype"); 118} 119 120</style> 121</head> 122<body bgcolor="#f2dae8"> 123 <h1 id="heading"> 124 <font color="black">お問い合わせ</font> 125 </h1> 126 <p class="form">送信完了</p> 127 <p class="textstyle"> 128 129 <p> 130 <button type="button" class="fontButton" onclick="location.href='contact.php'">入力画面に戻る</button> 131 </p> 132 133</body> 134</html>
回答1件
0
ベストアンサー
2014年の記事ですがいろいろわかりやすく書いてあると思います。
日本語フリーフォントをwebフォント化する4ステップ
IEに対応させる場合eotやwoffに変換して、下記のように読み込ませればいけると思います。
css
1@font-face{ 2 font-family: 'AzukiFont'; /* お好きな名前に */ 3 src: url('azuki-webfont.eot'); /* IE9以上用 */ 4 src: url('azuki-webfont.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */ 5 url('azuki-webfont.woff') format('woff'), /* モダンブラウザ用 */ 6 url('azuki-webfont.ttf') format('truetype'); /* iOS, Android用 */ 7}
あとは使用したいクラスなどに
css
1font-family: AzukiFont; /* 上で指定した名前に */
を指定します。
ブラウザ上の変換ツールは日本語対応していない場合が多いので、上記参考サイトでも紹介されているWOFFコンバータなどを使った方がいいかもしれません。
（eotにも変換できます）
また、出来上がったeotファイルやwoffファイルはダブルクリックで開けなくても問題ありません。
投稿2017/02/15 06:02
総合スコア3235
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/15 07:39