デバイスフォント・WEBフォント大解剖 〜新人デザイナーのテキストフォント選び〜 | WebNAUT by Beeworks
先輩「このテキスト、デバイスでやってね」 新人「え？デバイスってなんですか？」 こんなやりとり、経験ありませんか？ 今回は新人にありがちな、「デバイスフォントとWEBフォントって何？」「WEB上のテキストで使えるフォントってどんな種類があるの？」という疑問にお応えします。 目次 HTMLテキスト・画像テキストとは？ HTMLテキストで使えるフォント４分類！ 1.パソコンやスマホのOSに元々入っているフォント（＝OS標準フォント） 2.ユーザーが個別にパソコンにインストールしたフォント 3.外部のWEBフォントサービスが提供するフォント 4.自分でサーバーにアップしWEBフォント化したフォント 番外：OS標準フォントでいいんだけど結局何を使えばいいの？ HTMLテキスト・画像テキストとは？ WEB上で表示されるテキストは、大きく「HTMLテキスト」と「画像テキスト」の２つに分けられます。 「
2017年用、日本語のフリーフォント259種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 | コリス
個人や商用で無料利用できる、日本語のフリーフォント260種類を紹介します（公開時より、2つ追加）。 ビジネスからプライベートまで、幅広く利用できるフォントが満載です！ 毎年まとめていますが、去年は219種類だったので、大幅に増えています。無料でなくなったフォントや配布終了になったフォントもいくつかありました。 初紹介のフォントから既存フォントも改めてリンク・ライセンスを確認しています（※情報はこの記事の執筆時のもの）。ライセンスはWebデザインだけでなく、同人誌や印刷物などでの利用も明記。 最新版を公開！フォントの数が大幅に増えています。 2020年用、日本語のフリーフォント 417種類のまとめ フォント紹介の前に各フォント制作者からのお願いごと。 フォントを利用の際には、利用条件やライセンスを必ず確認して守ってください。 まずは個人的に、今年一年かなり使用したフォントからご紹介。 3種類
2020年まで使えるfont-familyおすすめゴシック体 - Qiita
新しい記事書きました。【font-familyについて本気で考えてみた】 「Chromeでも読みやすい游ゴシックを指定する方法 」の記事で游ゴシックが一部ブラウザで掠れる問題を解決出来たので、font-familyのベストプラクティスを考えてみたいと思います。 本当は「2016年font-familyの決定版」みたいなタイトルにしたかったのですが、執筆時は8月ですしね。2017年も名乗れません。 2020年と書いたのはWindows7のサポートが切れるのがこの年だからです。 目的はどの環境でも出来る限り近い見た目を目指すものではなく、実行環境で最も読みやすいものを目指すものです。MacよりもWindowsに比重をおいています。 -- 追記 -- Chrome58から一時対応しなくなってしまいましたが、游ゴシックをWindows版Chromeでキレイに表示する@font-faceの設定にヒン
標準の日本語フォント / もうパンツはかない
各環境でどんな日本語フォントが使えるのか、まとめてみました。 それぞれのOSで標準添付されていると思われる日本語フォントをCSSの指定で表示させたものをキャプチャーしました。小さい方の字は16ピクセル、大きい方は 150% とCSS上で指定しています。使用ブラウザは主に各環境の標準ブラウザ(MacはSafari、WindowsはEdge)です。 Mac Windows Linux macOS Sonoma (14) ヒラギノ角ゴシック (ウェイト:W0〜W9の10段階) font-family: "HiraginoSans-W0","Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 100; font-family: "Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 400; font-family: "Hiragino S
Unityでカスタムフォントをエディタから設定する
装飾した数字のフォントとかを表示するのにCustom Fontの設定をいちいち手動で設定するのはあまりにも非人道的なので設定できるスクリプトを作った。 フォントのテクスチャとフォントの設定(各文字のUVとかをテキストにしたもの)はWebで作るようにした。 フォントのテクスチャを作るツール https://sapphire-al2o3.github.io/js-demo/canvas/WebフォントでCavansに文字を描く/ エディタのスクリプト https://gist.github.com/sapphire-al2o3/7287333#file-editorfont-cs プロジェクトにEditorディレクトリを作って上記のファイル(EditorFont.cs)を置く。 プロジェクトでCreateからCustom Fontファイルを作る。 Custom Fontファイルで右クリックから
AS3 で埋め込みフォントを使うテクニック - てっく煮ブログ
as埋め込みフォントを使う場合のちょっとしたTipsを３つ紹介しておく。1. 何も考えずにフォントを埋め込む方法フォントを埋め込むには、Embed メタタグを利用する。 package { import flash.display.Sprite; import flash.text.TextField; public class EmbedFontTest extends Sprite { [Embed(source='アニトＭ-教漢.TTF', fontName='anito')] private var font:Class; public function EmbedFontTest(){ stage.align = "TL"; stage.scaleMode = "noScale"; var textField:TextField = new TextField(); textFi
Gray Graphics
㱈呍䰾਼䡅䅄㸊㱔䥔䱅㹇牡礠䝲慰桩捳㰯呉呌䔾਼千剉偔慮杵慧攽≊慶慓捲楰琢㸊㰡ⴭ੦畮捴楯渠浤ㄨ椩⁻潣畭敮琮業慧敳嬢湡浧楦≝牣㴢杩是普慭攢∮杩昢㬊紊晵湣瑩潮搲⡩⤠笊摯捵浥湴浡来獛≮慭杩昢崮獲挽≧楦⽦湡浥〮杩昢㬊紊⼯ⴾ਼⽓䍒䥐吾਼⽈䕁䐾਼䉏䑙⁍䅒䝉么䕉䝈吽∱㔢⁌䥎䬽∣晦晦晦∠䉇䍏䱏刽∣晦晦晦∠呅塔㴢⌴挴挴挢噌䥎䬽∣晦晦晦∠䅌䥎䬽∣晦晦晦∠䉁䍋䝒何乄㴢杩是执⹇䥆∾਼呁䉌䔠坉䑔䠽∱〰┢⁂佒䑅刽∰∠䍅䱌卐䅃䥎䜽∰∠䍅䱌偁䑄䥎䜽∰≈䕉䝈吽∳㜵∾਼呒㸊㱔䐠坉䑔䠽∱〰┢⁁䱉䝎㴢䍅乔䕒∾਼呁䉌䔠坉䑔䠽∷㔥∠䉏剄䕒㴢〢⁃䕌䱓偁䍉乇㴢〢⁃䕌䱐䅄䑉乇㴢〢⁈䕉䝈吽∳㌷∾਼呒㸊㱔䐠坉䑔䠽∱〰┢㸊㱔䅂䱅⁗䥄呈㴢㐴㠢⁂佒䑅刽∰∠䍅䱌卐䅃䥎䜽∰∠䍅䱌偁䑄䥎䜽∰∠䡅䥇䡔㴢㌳㜢㸊㱔刾਼呄⁗䥄呈㴢ㄸ∠䡅䥇䡔㴢ㄸ∾㱉䵇⁓剃㴢杩是ㄮ䝉䘢⁗䥄呈㴢ㄸ∠䡅䥇䡔㴢ㄸ∾㰯呄㸊㱔䐠坉䑔䠽∴ㄲ∠䡅䥇䡔㴢ㄸ∠䉇䍏䱏刽∣晦晦晦∾㱉䵇⁓剃
ふい字置き場
ふい字 v2.9 → ダウンロードはこちらから (2007.08.01) HuiFont29.lzh 約2.4MB ふい字Ｐ v2.9 → ダウンロードはこちらから (2007.08.01) HuiFontP29.lzh 約2.4MB ＜説明＞ ・TrueTypeフォント。WinXPまで/MacOS X以降で使えます。 ・日本語２バイトかな文字フォント。ひそかに縦書き対応。 「ふい字」は等幅、「ふい字Ｐ」はプロポーショナル。 ・入ってる文字は、 ひらがな/全角・半角カタカナ/全角・半角数字/ 全角・半角アルファベット/ギリシャ文字/ロシア文字/各種記号/ シフトJIS第一水準漢字/シフトJIS第二水準漢字/絵文字 他 ■こっちの「萌」も違ってる気がする……ね……。近々直します。 《軽量版》 ふい字 v1.09 → ダウンロードはこちらから (2007.08.01) HuiFont109.l
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ
CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。 まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。 それでは例えば総称ファミリー名（generic-family）である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
2010年総まとめ：商用利用も無料、日本語・英語の高品質なフリーフォント集
http://www.s-cut.net/memo/archives/web/070523_fontSizeTable/