2016-09-26 15 views
1

サーバーからフォントを読み込むことができます。それは適切な方法ではありません。 ベース64でフォントをロードするにはどうすればよいですか? 私はあなたがあなたのcssファイルの内部base64でエンコードされたフォントを含める正しく、あなたを理解している場合、私は、この私のCSSファイルhtml; base64でカスタムフォントをロード

  @font-face {<br> 
      font-family: 'MyFontFamily';<br> 
      src: url(data:font/ttf;charset=utf-8;base64,data_base64);<br> 
     }<br> 



    .t{<br> 
     font-family: "MyFontFamily";<br> 
     background-color: red;<br> 
    } 

これは私のhtmlページ

`<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
     <link rel="stylesheet" type="text/css" href="style2.css"> 
    <title>Document</title> 
</head> 
<body> 
    <p class = 't'>test</p> 
</body> 
</html>` 
+1

が、改行があなたのCSSには、実際にはありませんが、彼らは何ですか? –

+0

_ "サーバーからフォントを読み込むことができます。しかしそれは適切な方法ではない "_ - 誰が言う?とにかくどんな基準/どんな基準によって「適切」なのでしょうか? – CBroe

答えて

0

あるを使用していました。エンコードされたフォントに応じ

@font-face { 
font-family: 'MyFontFamily'; 
src: url(data:application/x-font-woff;charset=utf-8;base64,base64_code_here) format('woff'); 
} 

データヘッダおよびフォーマットの変更:あなたは、次の構文に従うことを持っていることを行うには

私はJSFiddleに例を作った:https://jsfiddle.net/b7sp45ca/

また、改行コード内で、あなたがそれらを取り除くために持ってしようとしているされている場合は、クリスJはコメント欄で述べたように。

(使用リソース:http://sosweetcreative.com/2613/font-face-and-base64-data-uri)ここでは、大規模な仮定を作る

+0

ありがとう、これは、私はこれのために特別なサイトを探していた1時間。 http://transfonter.org/。これは私を助けます。 –

関連する問題