[B! webフォント] naohorのブックマーク

naohor id:naohor

webフォントに関するnaohorのブックマーク (22)

楽して便利！Webアイコンフォント『Font Awesome』の使い方と活用 Tips
このブログでも何度か細々登場してきたアイコンWebフォントの Font Awesome。使い方の基本を知っていることで、利用できる幅がかなり広がるので、今日はその使い方のと活用のための Tips を幾つか書いておきます。 Font Awesome, the iconic font designed for Bootstrap ※ なお、本エントリーはバージョン4.0.3をもとに書いているため、バージョンアップによって、掲載しているコードも変わっている可能性があります。利用前に、使うバージョンとそのスタイルを確認してから使うことをオススメします。 Font Awesome とは？Font Awesome はサイト上で使われるようなさまざまなアイコンを Webフォントとして利用できるようにしたものです。フォントとして利用できるため、サイズや色などすべて CSS で調整して利用することができ
naohor 2015/03/11
webフォント
リンク
WebフォントのCSS指定2014年度版とこれまでの歩み
比べる。 WEBCRE8.jpとその仲間達で、web制作における﹁選択﹂において最良だと思われるものを考察していくカテゴリです。最近Webフォントについて色々調べたので、これまでの経緯やメジャーどころの記法を踏まえつつ良い書き方を探った結果を共有しておきます！私自身はまだ実務で積極的に使っているわけじゃないんですが…(でもぼちぼち使ってます)。足りない部分もあると思うんで何か指摘があったらがんがんツッコんでくださいw @font-faceルール @font-faceルールは、Webフォントの名称と読み込むフォントファイルを関連づける@ルールの一つです。その他、どのウェイトやスタイルに対応するかも指定できます。しかしWebフォントの扱いはブラウザ側のフォントファイルの対応状況、フォントファイル自体の進化によって変遷してきました。 Bulletproof Syntax これまでWebフォ
naohor 2014/05/22
webフォント

css

font
リンク
Webフォントを使ってみよう！@font-face 関連の情報いろいろ
Webフォントを使う機会があったのでついでに備忘録的メモです。 @font-face関連の情報いろいろ。と言っても、まだそんなに情報が無いので触りを理解するためのまとめ的な記事です。 Webフォントの良い所は、編集作業が不要、コピペも可能でテキストだからSEO的にも有利になりますけど、アンチエイリアスはフォントに依存しますし、日本語フォントはどうしても少なくなってしまうデメリットもあります。クロスブラウザでWebフォントを利用するには /* IE */ @font-face { font-family: abc; src: url(abc.eot); } /* Firefox, Opera, Safari */ @font-face { font-family: abc; src: url(abc.ttf) format("truetype"); }としてあげるといいみたい。IE
naohor 2014/02/13
webフォント

まとめ
リンク
403 Forbidden
naohor 2014/02/13
wordpress

webフォント
リンク
WP Google Fonts
Lamentabl emente no funciona con Elementor, las fuentes cargadas no se visualizan. No obstante la interface es fácil y sencilla de entender, solo falta que funcione.
naohor 2014/02/13
wordpress

Google

webfont

webフォント

プラグイン
リンク
Web fonts
Commercial fonts or free fonts?, this is a big dilemma that afflicts many designers as they find difficult to decide between beautiful but expensive fonts such as Helvetica or Futura and free fonts like the ones featured on Google Web Fonts, which also have a really nice design but will never be like the originals. This post more than being an extensive article where we discuss the benefits of fre
naohor 2013/09/12
webフォント

font

フォント

Google
リンク
Webフォント「Google web fonts」の使い方・実装手順メモ
商用・非商用を問わず無料で利用できるWebフォント、﹁Google web fonts﹂の実装方法をさっくりメモっておきたいと思います。 Google Web Fonts Google web fontsとは Webページ閲覧時、通常ではパソコンにインストールされているフォントしかブラウザで表示することが出来ませんが、﹁Webフォント﹂を使用すると任意のフォントを表示することが出来ます。 Googleの提供するGoogle Web Fontsはアカウント登録の必要も無く、実装が非常に簡単なそれの一つです。商用・非商用ともに無償で利用が可能と言うのもポイント:) ちなみに当サイトでも日付の表示とサイドバー・フッターの見出しにGoogle web fontsの﹁Coda﹂を使用しています。 Google web fontsの実装方法実装の手順は3ステップ。 1.使いたいフォントを選択する2
naohor 2013/09/12
font

webフォント

フォント

Google
リンク
pointcard.me
pointcard.me 2023 著作権. 不許複製プライバシーポリシー
naohor 2013/09/12
webフォント

フォント

まとめ

font
リンク
日本語Webフォントを使った一味違うWebサイトまとめ
ここ数年で日本語Webフォントの導入もかなり進ん... / 日本語Webフォントを導入したWebサイト / DENSUKE他...全15件ここ数年で日本語Webフォントの導入もかなり進んできました。マイナビ主催の「Webフォントデザインアワード」などでも年々注目度が増してきています。そこで、ここではいち早く日本語Webフォントを導入しているWebサイト事例をご紹介します。 Webフォントデザインアワード 2013 - 応募締め切りは9月30日（月）まで http://book.mycom.co.jp/wd/webfont/2013/
naohor 2013/09/03
webフォント

フォント

webデザイン

font

日本語

まとめ
リンク
無料で商用利用も可能な826種類の絵文字のWebフォント「絵文字フォント」
826種類の絵文字がセットになったWebフォントが﹁絵文字フォント﹂です。インターネット上での利用に特化しており、Web上での利用なら無料で商用利用も可能。ファイルはAI形式とWOFF形式の2種類があり、PC・タブレット・モバイル機器などで表示することができます。絵文字フォント - EmojiSymbols Font http://emojisymbols.com/jp/ 絵文字は全部で826種類です。トップページ下部の﹁Download Page﹂をクリックすると…… 禁止事項・免責事項などが記載されている﹁ご利用にあたって﹂のページが表示されます。フォントのダウンロードはページ下部にある緑色の﹁Download Font﹂から。また、ブラウザ上部にある﹁よくある質問﹂をクリックすると…… 対応ブラウザやWebフォントの使用方法などが書かれたページが。WOFFフォントはバージョン
naohor 2012/11/04
フォント

まとめ

素材

絵文字

フリー素材

webフォント
リンク
Google Web FontのフォントをCSS3で装飾した状態で確認出来る・Best Google Web Fonts
GoogleにホスティングされているWebフォントにCSS3等で 3Dやレタープレスなどのエフェクトをかけた状態をサクサク確認できる、というWeb サービスのご紹介です。 Google Web Fontの使用頻度が高いなら結構役立つかもしれません。装飾したCSSの発行もしてくれます。右カラムでGoogle Web Fontを選択、左カラムの上部にエフェクトを選択するボタンがあります。選択すれば即座にプレビューに反映されます。上記はLeandeというエフェクト。下部でCSSのソースやWebフォント用のコードをコピー出来ます。フォントはGoogle Web Fontにあるもの全てが揃っているわけでは無さそうですが、増えていくんじゃないでしょうか。ご利用は以下よりどうぞ。 Best Google Web Fonts
naohor 2012/09/30
Google

webフォント

css3
リンク
ソーシャルアイコンをWebフォントで表示する方法を色々ご紹介
twitterやFacebookなどのソーシャルメディア関連のアイコンを表示しているサイトはよく見かけますが、そのほとんどは画像だと思います。今回、Webフォントを使って表示する方法を紹介しますので参考になればと思います。実物は別サーバーにアップしていますので、こちらでご確認ください。今回はWeb Symbols typefaceさんのアイコンを使わせていただきました。で、まず最初にアイコン形式のフォントを読み込む設定をします。 @font-face { font-family: 'WebSymbolsRegular'; src: url('websymbols-regular-webfont.eot'); src: url('websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('webs
naohor 2012/09/23
webフォント

アイコン
リンク
WebFonts として利用できるフリーの和文フォント | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日ブログ作りなおそうかなーと思って、この Webサイトをみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せてみたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページはXHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
naohor 2012/09/01
css3

フォント

font

webフォント

フリー
リンク
designers-hack.net
This domain may be for sale!
naohor 2012/08/02
webフォント
リンク
Webフォント・サービス FONTPLUS ｜ためし書き
お使いのブラウザではご覧いただけませんお手数ですが、最新の対応ブラウザ（Chrome／Edge／Firefox／Safari）にて再度ご覧ください。
naohor 2012/08/02
webサービス

フォント

font

webフォント
リンク
超ハイクオリティな日本製フリーフォント「Spun Gold」と、その他日本製のおすすめフリーフォント
Spun Gold - onotakehiko.... / Koushiki Typefaces / Vegur他...全5件
naohor 2012/07/22
フリーフォント

webデザイン

フォント

font

webフォント
リンク
Ligature Symbols
HTML & CSS Please copy & paste this code to your HTML file or Stylesheet. <p>Simple use for mailto link.</p> <a href="mailto:mail@example.com" class="lsf">mail</a> <p>Use tha icon with text.</p> <a href="http://twitter.com/" class="lsf-icon" title="twitter">Twitter</a> <p>Use tha icon with unicode.</p> <a href="http://amazon.com/" class="lsf-icon amazon">Amazon</a> /* CSS */ @font-face { font-fami
naohor 2012/07/21
webフォント

フォント

font

svg

css

アイコン
リンク
http://pointcard.me/japanese-free-web-fonts/
naohor 2012/05/21
webフォント

まとめ

font

フォント

フリーフォント

webデザイン
リンク
Webフォントにも利用可能なフリーの天気アイコンフォント・Climacons Font
土曜日なので軽い話題。天気アイコン型のWebフォントです。スマートフォンのアプリ向けに作られたみたいです。見た目が可愛いのでアプリ以外にも何かに利用したいですね。天気アイコンフォント、というニッチなニーズに応えたフリーフォントです。スマフォのアプリなんかに良さそうな感じ。Webフォントにも利用できますが、PSDやEPSも用意されています。可愛らしい天気アイコンです。UNIQLO CALENDARにも似たようなテイストのアイコンが使われていましたね。結構揃ってます。フォトショやイラレで使えるデータもあります。商用でも使っていいみたいですけど直に販売したりするのはやめてくれ、との事です。下部に規約あるので目を通してくださいませ。 Climacons Font
naohor 2012/05/12
webフォント

font

フォント
リンク
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
naohor 2012/05/12
フォント

Google

font

API

webフォント

webデザイン

webサービス
リンク
1 2 次のページ

お知らせ

もっと読む

公式Twitter

@HatenaBookmark
リリース、障害情報などのサービスのお知らせ
@hatebu
最新の人気エントリーの配信

キーボードショートカット一覧

j次のブックマーク

k前のブックマーク

lあとで読む

eコメント一覧を開く

oページを開く

設定を変更しましたx