25

@ font-faceルールがあり、次のようになります。

@font-face{
    font-family:'F';
src:url("") format("embedded-opentype"),
url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAA ... ETC... ETC

これをフォントファイルに変換できますか?

ありがとう!

4

3 に答える 3

45

base64でエンコードされた部分をコピーして変換します。それを行うには多くの方法があります。

Linux

base64 -d base64_encoded_font.txt > font.woff

Mac OS X

openssl base64 -d -in base64_encoded_font.txt -out font.woff

ウィンドウズ

http://www.motobit.com/util/base64-decoder-encoder.aspにアクセスして、テキストを貼り付けます。「Base64文字列からデータをデコードする(base64デコード)」と「バイナリファイルにエクスポートする」を選択します。

于 2012-09-21T14:39:41.953 に答える
4

@mcrumleyの答えは正しいですが、それを理解できない、および/またはコマンドラインを恐れている人のために、私は別の方法を持っています。

質問をグーグルで検索したところ、base64ファイルを元の形式に変換/デコード(およびエンコード)できるhttp://base64converter.com/が見つかりました。以前はbase64画像のエンコードとデコードに使用していましたが、フォントを使用したのはこれが初めてでした。テストとして、ランダムなWebページのcssファイルで見つけた埋め込みbase64フォント情報をプラグインしました。エントリ全体は必要ありません。css情報を省略してください。そうしないと、変換が失敗します。

  1. (例)base64の前にあるこの情報を削除します。

    @font-face{font-family:"Example";src:url(data:application/x-font-woff;base64,
    
  2. これを最後から削除します。

    ;font-weight:400;font-style:normal}
    
  3. base64でエンコードされたデータが残ります。これを[入力]フィールドに貼り付け、出力として[デコード]を選択して、ボタンを押します。と呼ばれるファイルが作成されますdownload.bin:クリックしてダウンロードします。次に、ファイル拡張子をからbinに変更しますwoff(フォントのファイルタイプは異なる場合がありますが、cssに表示されます)。.woffファイルを開くことができ、変換は完全に機能しました。すべてのアウトラインが保存されただけでなく、グリフ名、OpenType機能、カーニングなどすべてが保存されました。

もちろん、Webフォントをリッピングするために使用される他の方法と同様に、出力されるグリフの数は、問題のページで使用されるものに制限される可能性があります。

woffファイルが必要なものでない場合は、選択した形式に変換するためのオンラインツールがたくさんありますwoff。または、オフラインツールが必要な場合は、私が尋ねたこの質問と私が受け取った回答を確認してください。

ディレクトリ内のすべての「WOFF」ファイルをバッチ変換するようにPythonスクリプトを変更する

于 2016-04-10T18:50:15.137 に答える
1
  1. コピー:

    data:application/x-font-woff;charset=utf-8;base64,d09GRgABAA ...ETC
    
  2. ブラウザのアドレスバーに貼り付けて、Enterキーを押します。

    - A save as window appear -
    
  3. 保存するフォルダを選択します(例:mywebsite / fonts)、ファイル名:myfont.woff

    - you now have myfont.woff in a folder -
    
  4. cssに含める:

    @font-face {
       font-family: 'myfont';
       src: url('fonts/myfont.woff');
       font-weight: normal;
       font-style: normal;
    }
    
  5. クラスに追加:

    .headline {
    font-family: 'myfont', Helvetica, Arial, sans-serif;
    }
    

終わり。

(data:URI構文で宣言されているものと同じファイル形式を使用する必要があることに注意してください。あなたの場合は... application/x-font-woff...したがってmyfont.woff)

于 2020-11-25T22:05:25.190 に答える