游書体をCSSで指定しよう - Qiita
はじめに 2017/01/20現在、挙動のテストが追いついていないので、このページを訪れる人に役立つと思われるリンクを置いておきます。 https://speakerdeck.com/tacamy/modanri-ben-yu-huontozhi-ding https://rxon.now.sh/crossPlatformYu.md 以下は2013年11月の情報なので参考にしないでください(その間にChoromeがDirectWriteに対応してnameテーブルの参照メタデータが変わったりしていて、設定すべきfont-family値が変わっていることが大きな要因です)。 序文 Windows8.1とOS X Mavericksのリリースが開始されました。 Windows8.1ではRC版にインストールされていた游ゴシックに加えて、游明朝もインストールされています。 OS X Maverick
パンダのかわいらしい姿をそのまま英数字や記号にしたWWFの「PANDA FONT PROJECT」
パンダは愛くるしい見た目から多くの人々に好かれている動物で、日本国内では3カ所の動物園で計10頭のジャイアントパンダが暮らしています。しかし、野生のジャイアントパンダは世界中で約1600頭と言われていて絶滅の危機に直面しています。そんな中、環境保全団体のWWFジャパンは、パンダの保護活動の一貫として、パンダをモチーフにしたかわいらしいフォントを制作しています。 Adeevee - WWF Japan: The Panda Font Project http://www.adeevee.com/2015/05/wwf-japan-the-panda-font-project-design/ パンダフォントのアルファベット(大文字/小文字)と数字の一覧は以下の通り。白黒のパンダの柄をうまく生かした丸っこい形がなんともキュートです。 パンダフォントを紙に印刷したサンプルは以下のような感じです。
[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説
CSSでのフォントサイズの指定方法をその単位とそれぞれの相違から、レスポンシブに適したフォントサイズの指定方法までをやさしく解説します。 CSS Font Sizing 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 CSSでのフォントサイズの指定方法 各指定方法の特徴 レスポンシブに適したフォントサイズの指定方法 CSSでのフォントサイズの指定方法 CSSであなたがフォントのサイズを指定するには、いくつかの方法があります。大きく分けると、絶対値（absolute）と相対値（relative）の二つです。 絶対値（absolute） 絶対値はそのサイズが固定されており、その指定を受けたフォントはそのサイズで表示されます。これは他の要素に影響を受けません。 相対値（relative） 相対値はサイズ自体の値を持っていません。サイズは親要
![[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/a1756c6abf56af6fcc3bd951dc8836bd403779c8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015060501.png)
「－」「ー」「一」この3つの記号、違いが分かりますか？
これと戦ってる（白目 －（全角ハイフンマイナス） -（半角ハイフンマイナス） ‐（全角ハイフン） −（全角マイナス） ‒（フィギュアダッシュ） —（全角ダッシュ） –（二分ダッシュ） ―（ホリゾンタルバー） ー（全角長音） ｰ（半角長音） ─（罫線） ━（罫線） 一（いち） — ヤブ (@yaboojp) 2015年5月20日 ハイフン、ダッシュ、漢数字の「いち」など、横棒1本で表される記号や文字は、挙げられているだけでも13種類ある。長さや太さが微妙に異なるだけで、覚えるのは大変だろう。 "https://t.co/wPrKLWJJno" ـ（カシーダ） ＜僕も仲間に入れて ※ カシーダ：アラビア文字を冗長的につなぐカリグラフィー的な記号。 — シオン=ソルト (@ShionSolt) 2015年5月20日
デザイナー必見！和風なデザインに使える「毛筆フォント」のまとめ
制作中のサイトで毛筆フォントが欲しかったのでまとめてみました。高品質のフォントがいっぱいありましたが、これだけあるとどれ使用するか迷いますよね？利用に関しては各フォントのライセンスをご確認の上ご利用ください。 筆ペンで書いた手書きフォントです。！？と（）は全角・半角共に同じものが出ます。ひらがなのみ対応しています。 ダウンロード先：毛筆フォント 商用：商用OK OS：Windows / Mac 毛筆太文字 筆ペンで少し太めに書いた文字です。ひらがなとカタカナ収録されています。※漢字は一部のみしか入っていません ダウンロード先：毛筆太文字 商用：商用OK OS：Windows / Mac 大甘書道体 アニメ銀魂で次回予告に使われていた文字をデジタルフォント化。ひらがな、カタカナ、英字5文字、第一水準漢字1,324文字、第二水準漢字782文字、その他の漢字1,380文字 ダウンロード先：大甘書
グーグルが日本語Webフォントを提供してた。これはWebフォントの大転換になるかも？ | 初代編集長ブログ―安田英久 | Web担当者Forum
今日は、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 Awesome 5 の簡単な使い方 [ホームページ作成] All About
Font Awesomeとは？ Font Awesomeとは、CSSのWebフォント機能を使うことで数千種類のアイコンをテキスト(文字)として表示可能にしたアイコンセットのことです。単なるアイコン画像集とは異なり、あくまでも文字としてアイコンを表示できる絵文字フォントなので、自身のウェブページ上に自由なサイズ＆好きな色で、簡単に様々なアイコンを表示できるメリットがあります。 今回は、豊富な絵文字が詰まったアイコンフォント Font Awesome 5を、自身のウェブサイトで簡単に使う方法をご紹介いたします。とても短いHTMLソースを書くだけで望みのアイコンを掲載でき、CSSを使って自由自在に装飾できます。ぜひ試してみて下さい！ 【本記事の目次】 概要：豊富なアイコンセット Font Awesome 5のバージョンと仕様 概要：Webフォントの仕組みと利点 準備：Font Awesome 5
![アイコンWebフォント Font Awesome 5 の簡単な使い方 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/3bfe467d28b574e3204d076e187c1fcfa85c7b3a/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F0%2F2%2F5%2F5%2F1%2Ftopimg_original.png)
美しい日本語フォントの組み合わせ！「AcuCaseProject」がすごい！ | co-jin
美しい日本語フォントの組み合わせで、少ないフォントでも、より美しい日本語デザインを実現できる素晴らしプロジェクトをご紹介します。 日本語で美しいフォントを取り揃えようと思うと、MORISAWA PASSPORTなどをはじめとした有料ライセンス契約を結ばなければなりません。だた、高額であるため、仕方なく少ない手持ちフォントを駆使してデザインを行っている方も多いでしょう。 Adobe製品を使っている場合は、最初から「ヒラギノ」や「小塚」といったプロユースのフォントが入っていることから、これらのフォントを使用する頻度も高いと思います。 しかし、「ヒラギノ」も「小塚」も、クセのあるフォントであるため、単体で使っていると「どうもしっくりこない」というご経験があると思います。 ところが、手持ちの少ないフォントでも、より美しい文字デザインを実現できる、日本語フォントの組み合わせを提唱してくれているプロジ
日本語ウェブフォントでサイトを明朝体表示。CSSフォント指定
デザインにおいてフォントは重要です。 しかしウェブ上では日本語フォントはデフォルトのものか 画像に置き換えているのが現状です。 今回は、とくにウェブに向いていないと言われている 日本語ウェブフォントの「明朝体」でのデザインについて 無知なりに解説してみたいと思います。 ちなみに当ブログは「フロップデザインフォント」を使用してます。 webフォントとは、CSSで指定したフォントを表示する方法です。 閲覧者が指定したフォントを持っていなくても 制作者サイドでサーバーにアップしておけば表示可能になるのです。 しかし、これにはいくつか問題があります。 日本語フォントは容量が重いため表示に多少の問題がある。 サーバーにアップするという行為自体が禁止されている。 など実際にはいくつかの壁があります。 ただ今後はこれらの状況も変わってくると思います。 1.Winodws 8.1、OS X Maveric
IMEパットにない文字の入力方法
＃８さんの回答について １．MS明朝でUnicode:U+20BB7に“つち吉”があるのは、Windows8だからでしょう。 “すでに公開されている”から誰でも使えるということは、間違いではありません。 しかしWindows7の人には、最初に 「Windoes8を入れれば、こんなふうに使えます。」 と言うべきでしょう。 Windows 7 (SP1) では、MS明朝はVersion 5.01 で、“つち吉”はありません。 ２．添附された「文字一覧」の画像で「MS明朝」にマークがしてありますが、これは “この外字ファイル(拡張子TTE)がMS明朝にリンクされている。” ということを示しているだけで、この外字ファイルはMS明朝とはまったく別のものです。 外字神社というサイトからリリースされているフリーウェアです(下に画像を附けます)。 GaijiJinja_F040_M.tte http://
テキストを好きなフォントで表示できるJavaScript「cufon」
twitter facebook hatena google pocket 最近多くの英語サイトのソースで見られるJavaScriptにcufon.jsと言うのがあります。 これはJavaScriptを使用して、テキストを好きなフォントで表示できるものです。 Google Font APIが出ましたが、まだまだ数が少ないです。 こだわりのある方は、フォントを選択できるcufo'n - fonts for the peopleを使用するのも良いのではないでしょうか。 ※フリーフォントのみで・・ sponsors 使用方法 cufo'n - fonts for the peopleからcufon.jsをダウンロードします。 また、表示させたいフォントをjs化します。 今回は、1001 Free Fonts - Download Free Fonts for Windows and Macint
ついにウェブでも有名書体が使える！Webフォントサービス Fonts.com Web Fonts β版が運用開始 - フォントブログ
フォントブログ閉鎖と一部記事の移管について 平素はフォントブログをご覧いただき誠にありがとうございます。 数年前よりブログの更新を中止したまま、諸般の事情で過去の記事は公開をしていましたが、 時代に合わない内容や、すでに古い情報をこのまま残しておくのは良くないと考え、 フォントブログを閉鎖することにいたしました。 これまでお世話になった方々、私に様々な機会を与えてくださった方々、 そして約25年間に当ブログをご覧いただいた方々に心より感謝いたします。 私自身2014年に関東から地元へUターンをし、 書体デザイナーやフォントメーカーの方、文字関係者の方と直接お会いする機会が減ってしまったこと、 また私自身の環境の変化により、以前のように情報収集をする時間の確保が難しくなってしまいました。 フォント好きとして初心に帰り、過去の一部の記事は順次個人サイト (PETITBOYS) のブログのほうへ
自由自在にフォントを使う！
IEが4から対応しているのは意外な事実ですが、IEはEmbedded OpenType、eot形式のフォントでないと表示できないという注意点があります。 @font-face記述方法 @font-face { font-family: 'フォントファミリー名'; src: url('フォントファイルのurl'); } @font-faceで指定したフォントを(X)HTMLで使うには次のとおり。 selector { /*@font-faceで指定したフォントファミリー*/ font-family: フォントファミリー名; } また、もしユーザーがそのフォントを既に持っている場合のことも考慮する場合は次のようにします。（持っているならダウンロードする必要はないため） @font-face { font-family: 'フォントファミリー名'; src: local('フォントファミリー名'
TypeKit で広がる Web デザインの可能性
今年の 5月頃に発表されて、@font-face 時代の幕開けだぜと期待をふくらませていた Web サービス、「TypeKit」 が正式に公開され、誰でも使用できるようになりました。TypeKit は、権利問題をクリアした多くのフォント一覧から自分の好きなフォントを選んで、簡単なソースコードを Web ページに埋め込むだけで @font-face によるフォントの指定が行えるようになるサービス。今までフォントの関係から画像で処理していた部分をテキストデータとして処理しつつある程度自由にフォントを選べるので、デザイナーにとっては表現の幅が広がるのではないでしょうか？ 今年の 5月頃に発表されて、@font-face 時代の幕開けだぜと期待をふくらませていた Web サービス、「TypeKit」 が正式に公開され、誰でも使用できるようになりました。 Typekit is live ： The
「fonthack.jp | フリーで使える日本語フォント」に使われている日本語フリーフォントをまとめてみた（漢字も使える）：ekakou:絵描校 - 絵の描き方講座
（フリーで使える日本語フォント） 好きな文章を入れて日本語フォントを試せる「fonthack.jp」 本日紹介するのはこのサービス....ではなく、このサイトで使用されている日本語フォントをまとめてみました。 詳しくは以下から、 Y.OzFonｔシリーズ F910ゴシックW3-IPA（無料） F910明朝W3-IPA（無料） KesaranPasaranKT qoocRomanKT SampomichiHR Tokage-no-ShippoHR TowerGothicKT 出島明朝フォント みかちゃん ホリデイＭＤＪＰ えるまー M+ と IPAフォントの合成フォント M+ IPAフォント 梅フォント さわらびフォント さざなみフォント 戸越フォント VLフォント GLアンチック GL築地5号 白舟教育漢字 怨霊 ルイカ あられ アニト キャパニト セプテンバー ゆたぽん（コーディング）
ドケチなのに良質な無料漢字フォントを探している人向けフォント大全集｜| ＾＾ |秒刊SUNDAY
ドケチなのに良質な無料漢字フォントを探している人向けのフォント集 バイオレンスなニュースサイト秒刊SUNDAY（びょうかんサンデー） 無料で使えるフォントは多々ありますが、日本語フォントはなかなかないものです。また日本語でも漢字が使えるものはさらに絞られ、数少ないのですが、これらはその少ないうちの一つです。 ◆Windows用Ｏｓａｋａ ■WindowsでOsakaフォントを使おう！ ◆モトヤ ■全文字フリーフォント ※登録が必要です。 ◆Holiday MDJP02 ■Holiday-MDJP03 / 2byte True Type ■Holiday-MDJP03 ◆メイリオ ■ Windows XP 向け ClearType 対応日本語フォント ◆IPAフォント ■IPAフォント ◆M+フォント ■トップ ■M+フォント( ◆VLゴシックフォント ■VLゴシックフォントファミリ ◆MO
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
【Noto Sans Japanese】ブログの記事を綺麗なフォントで表示したいので最軽量化してみた | CriativeTips
Windows7：外字を他のパソコンで表示するには（外字の移行・コピー） －教えて！HELPDESK
新着記事