0

Zurb Foundation General Enclosed フォント アイコンを使用しようとしています。ファイルをダウンロードしました。ファイル名の拡張子は「sgv」、「ttf」、「woff」です。それらをページに含める方法がわかりません。私はこれに完全に慣れていません。私はグーグルを検索し、これに関するいくつかのブログを読みましたが、まだ混乱しています. ファイルを機能させるための設定方法がわかりません。私のプラットフォームは asp.net mvc です。ありがとうございました

4

4 に答える 4

6

ファイルをダウンロードしました。ファイル名の拡張子は「sgv」、「ttf」、「woff」です。それらをページに含める方法がわかりません。

ファイルをダウンロードすると、次の Foundation Fonts フォルダー構造が作成されます。

- foundation_icons_general_enclosed
--- fonts
--- saas
--- stylesheets

ASP.net プロジェクトでは、Foundation からの更新がある場合にすばやく更新できるように、スタイルを別のファイルに保存しておくことをお勧めします。それらを独自のフォルダーにコピーすることもできます。したがってContent、デフォルトでフォルダーがあり、次の構造を持つことができます。

- Content
--- fonts - copy `eot`, `sgv`, `ttf`, and `woff` files
--- addon - copy `general_enclosed_foundicons.css`

ファイルをコピーしたら、正しいフォント ファイルを指すようにスタイルを調整する必要があります。次に例を示します。

@font-face {
    url("../fonts/general_foundicons.eot")

次に、ファイルを参照して、プロジェクトで使用できるようにします

<link href="@Url.Content("~/Content/addon/general_foundicons.css")" 
    rel="stylesheet" type="text/css" />

そして、遊び場に示され<i class="foundicon-[icon]"></i>ているようにして、それらを使い始めることができます。例えば：

<i class="general foundicon-add-doc"></i>
// to use it as a link
<a href="some_url"><i class="general foundicon-add-doc"></i></a>

展開に関する追加のヒント

Web サイトで初めてフォントを使用した場合、展開後にフォントが機能しなくなります。この問題が発生した場合は、IIS に次の MIME タイプがあることを確認してください。デフォルトでどれが入っているか忘れましたが、デフォルトでは次のものはないと確信しています:

  • ファイル名拡張子:.svg
  • MIME タイプ:image/svg+xml
  • ファイル名拡張子:.ttf
  • MIME タイプ:application/octet-stream
  • ファイル名拡張子:.eot
  • MIME タイプ:application/octet-stream

省略しても問題.woffありません。

于 2013-05-15T01:32:57.073 に答える
1

ファントム編集

F4... viola で動作しない zurb アイコン フォントに関する宣伝文句を投稿した直後に、修正しました。そのため、必要な説明を追加するために投稿をやり直しています。

Zurb サイトの説明は、通常、少し漠然としています。Sass の一般的な知識が必要であり、Sass 初心者にとってはすぐに混乱してしまいます。だからここに行きます：

1) ファイルをダウンロードしたら、Foundation フォルダー内の適切なディレクトリにコピーします。私は Zend を使用しているので、Foundation Sass のセットアップがある場所にこれらを配置します。ドキュメントにあるように、.scss ファイルを適切なフォルダーにコピーし、新しいフォント ディレクトリ全体を Foundation フォルダーの同じディレクトリ レベル (Sass と Stylesheets のすぐ隣など) にコピーします。

注: このような単純な手順が一部の人にとって混乱を招く理由の 1 つは、Zurb のドキュメントでファイルの「追加」ではなく「マージ」という用語が使用されているためです。実際にマージされるファイルは 1 つだけです: _settings.scss

2) _settings.scss ファイルはどうなっていますか? 開いてチェックしてみてください！フォントの単なるミックスインです。そのコードを取得して、既存の _settings.scss フォルダーの上部近くに追加します。下の方に追加するとうまくいきませんでした。

3) Zurb ドキュメント ページからの CSS のスニップを app.scss ファイルの先頭に追加する必要があります。すべての @import 宣言のすぐ下に配置しました。

4) Compass がオンになっていて、Foundation フォルダーを監視していることを確認してください。わあ。

わかりました、私はその日の善行を行いました。

于 2013-09-30T14:08:28.993 に答える
1

フォントをダウンロードすると、スタイルシートとフォント フォルダーを直接 Foundation にマージするだけで済みます。CSS は次のようになります。 

@font-face {
  font-family: '[set]Foundicons';
  src: url('fonts/[set]_foundicons.eot');
  src: url('fonts/[set]_foundicons.eot?#iefix') format('embedded-opentype'),
       url('fonts/[set]_foundicons.woff') format('woff'),
       url('fonts/[set]_foundicons.ttf') format('truetype'),
       url('fonts/[set]_foundicons.svg#[set]Foundicons') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class*="foundicon-"] {
  display: inline;
  width: auto;
  height: auto;
  line-height: inherit;
  vertical-align: baseline;
  background-image: none;
  background-position: 0 0;
  background-repeat: repeat;
}

[class*="foundicon-"]:before {
  font-family: "[set]Foundicons";
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
}

こんな使い方です。

<i class="foundicon-[icon]"></i>

財団の文書から。

于 2013-05-15T00:00:42.077 に答える