You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
こんにちは。EXP ひのたんです。 最近アイコンフォントを作って GitHub と npm で公開したのでその紹介記事です。 feathericon Web サイト: http://feathericon.com/ GitHub: https://github.com/featherplain/feathericon npm: https://www.npmjs.com/package/feathericon 名前は私の Web 上のハンドルネームである「featherplain (フェザープレイン) 」と icon を合わせた 「feathericon (フェザリコン) 」です。 アイコンフォントと言えば Font Awesome や GitHub の Octicons のアイコンフォントの巨人がすでに存在します。Web フォント化していなくとも、「vector free icons」
Handwritten Notes Special! Blow away the competition by sending personalized, handwritten notes to really show your customers you care, and without all the work. We have been looking to enhance our gift card options for our customers for sometime and we are thrilled with the recent launch of our partnerships with Handwriting.io and Gift Card Impressions. Customers can now choose from a variety of
ゴシック体 明朝体 丸ゴシック すべて カッコのみ Hiragino Noto 横書き 縦書き w100 w200 w300 w400 w500 w600 w700 w800 w900 0.625rem 0.75rem 0.875rem 1rem 1.125rem 1.25rem 1.5rem 2rem Before 「約物半角専用のWebフォント」を優先的に当てることによって、Webテキストの日本語に含まれる約物を半角にすることができました。例えば「かっこ」や『二重かっこ』、【バッジに使いそうなかっこ】などを半角にできます。ウェイトは9種類。Noto Sans JPに沿っています。 <!-- HTML:CDNリンクを貼り付け --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist
皆さん、Webフォント使ってますか? Qiitaでも有名なアイコンフォントが使われてますね。FontAwesomeです。 今のところStableだとかBetaのChromeでQiitaを見ても何の問題も無いでしょう。(今回の辺りでは。) しかし、うちのChrome(38)ではこのようになってしまいます。 見事に豆腐です。 Why? ここでDevツールを開いてエラーログを見てみましょう。 そう。QiitaのFontAwesomeはcdn.qiita.comと言うCDNを経由して配信されていたんですね。でもChrome38以降のBlinkではフォントに対してもOriginチェックがあるらしい… ちなみに このことはChrome37までで既に予告されてたんですね。(手元にあったのがChromium37だったのでそれ以前のは確認できてませんが。) まとめ CDNとか経由してフォント配信する際はクロ
独立して読んでいただける様書いていますが、S3+CloudFrontでWebフォントを利用する(FireFox対応)の続編的位置づけです。 heroku で運用していると CSS、JS、画像、WebフォントなどをCDNで配信したくなるので、そのやり方をまとめました。 実は heroku の仕様変更で構成を変えざるを得なかったためにやったんですが、結果的にいい形にまとまったと思います。 大いに参考にしたサイトがこちら。 CloudFront CDN with Rails on Heroku こちらを読めばこの記事は読まなくてもいいかも。 Asset Sync をやめる。 Asset Sync は、heroku へのデプロイ時に実行される rake assets:precompile の際に、S3 などの外部ストレージに assets の中身をコピーしてくれる gem です。 元から使っていな
Convert more Save your font{{Main.fonts.length > 1 ? 's' : ''}} Thank you for using online font convert. I have removed all ads and all the other extraction to keep it as simple as possible. So this solo rely on donations now instead since many of you use adblock anyway. The Online Font Converter is a 100% free service. The Online Font Converter converts fonts to/from: pdf dfont eot otf pfb tfm pf
CSSの埋め込み方まで詳細に説明している所がなかったのでまとめてみました。 デモプレビュー 書き出しサンプル + デモデータ 一式 1. フォントダウンロード 2. アプリインストール サブセットフォントメーカー WOFFコンバータ OTF → WOFF + EOT WOFF → TTF http://opentype.jp/woffconv.htm 3. サブセット化 サブセットフォントメーカーを使用してフォントをサブセット化しファイルサイズを削減します。 以下、アスキー文字 + 非漢字文字 + 第1水準漢字でサブセット化すると 16MB→700KB 位になります アスキー文字 !”#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~¡¢£¤¥¦§¨©ª«¬
今日は、Webフォントの話題を。日本語Webフォントは、「使いたい、でも重くなるからちょっと」という人が多いと思います。でも、グーグルがクラウド上でWebフォントを提供し始めたことで……。 グーグルが日本語のWebフォントをクラウドで提供開始グーグルが日本語のWebフォントを提供し始めていました。実は、2014年7月からあったらしいのですが、私はつい最近になって知りました。 その名も、「Noto Sans Japanese」。このページの表示も、「Noto Sans Japanese」にしてあります。 Noto Sans Japaneseは、6934文字に削減したサブセット版が提供されており、ウェイト(太さ)が7バリエーション。1ウェイトあたり約4.5Mバイトほどのサイズです。 使い方を簡単に説明すると、CSSで定義ファイルを読み込み、 <style> @import url(http:/
Web font downloader/inliner. Downloads a set of web fonts specified by @font-face rules in a CSS file. By default, woff2 equivalents are inlined as the modern browsers all support it. By inlining woff files, this reduces the number of server roundtrips by two in the best case (the external CSS and woff files), one in the worst (just the external CSS). By reducing roundtrips we can reduce the amoun
Web performance is a crucial aspect of web development that focuses on the speed at which pages load, as well as how responsive they are to user input. When you optimize your website for performance, you're giving users a better experience. The initial release of this course focuses on web performance fundamentals, that beginners should find informative. Each module aims to demonstrate key perform
2013-06-03 Ruby on RailsのAsset Pipelineを使って、Webfontを利用する Ruby on Rails Web Font 最近は、アイコンがWebFontとしても配布されるケースが増えてきました。アイコンの色を変えたり伸縮させたりすることが、CSSだけですぐできるので便利です。 今回Ruby on RailsでWebFontを使用するにあたり、どのようにfontを設置すればいいのか調べたのでまとめます。 現在使用しているRailsのバージョンは3.2.12です。 WebFontを設置する 今回はWebFontを下記のパスに設置します。fontsディレクトリを作成して、その中にフォントファイルを入れておきます。 {RailsRoot}/app/assets/fonts/myfont.eot {RailsRoot}/app/assets/fonts/myf
I have some fonts being configured in my Scss file like so: @font-face { font-family: 'Icomoon'; src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'), asset-url('icoMoon.woff', font) format('woff'), asset-url('icoMoon.ttf', font) format('truetype'), asset-url('icoMoon.svg#Icomoon', font) format('svg'); } The actual font file are stored in /app/assets/fonts/ I have added config.as
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く