公開日:2014年8月22日 最終更新日:2019年3月25日 Webページで使用するフォントはCSSでfont-familyプロパティに指定します。PCサイトの場合はWindowsとMac OSを対象にしますが、スマートフォンで閲覧することも考え、iOSとAndroidも含めた指定を検討してみました。 欧文フォントだけを考えればいいのなら、Webフォントで対応することが現在は主流です。 しかし文字種類の多い日本語フォントが必要なサイトでは、どうしても端末にインストールされているデバイスフォントを使用せざるを得ません。 どういうデバイスフォントがインストールされているかは、端末により異なります。 MacとWindowsで共通しているフォントもありますが、デフォルトで使用するフォントは違いますので、Webページの表示を整えたいのならきちんと指定することが必要です。 スマートフォンまで考えたら
最近覚えた、テキスト周りのCSS記述法をまとめておきます。 海外のHTMLテンプレートやWordPressに日本語の文章を流し込むと急激にダサくなったりしますが、今回紹介するテクニックを使えばその問題が解決するかも? 1.レスポンシブ対応の見出し改行 日本語特有の問題として、改行位置が気になることがあります。文章の途中の予期しない位置で改行されてしまうわけです。本文であれば仕方ないのですが、見出しが変な場所で改行されると一気にダサくなります。 中途半端な位置で改行される例 以下のように、横幅によって改行位置が変わります。 See the Pen 改行問題1 by Takumichi Nakashima (@dcp) on CodePen.dark 一方、英文の場合は… 英語の文章の場合は単語と単語の境目で改行されるので、それほど変なことにはならないはずです。 See the Pen 改行問
Updated 2016.12.17 / Published 2013.10.29 OS X MavericksとWindows 8.1からは、游書体の游明朝体と游ゴシック体が標準インストールされています。 游書体はMacOS Xの標準書体であるヒラギノシリーズの制作・監修を担当した有限会社字游工房が制作した書体で、2010年に全ファミリーが完成しています。これまでにも游書体は、Windows Phone7.5の日本語のシステムフォントとして、iOSではiBooks3.0のアプリ専用フォントとしても利用されています。 字游工房_游書体ライブラリー_游明朝体ファミリーより 游明朝体ファミリーは「時代小説が組めるような明朝体」をキーワードに、単行本や文庫などで小説を組むことを目的に開発した游明朝体Rを核とした明朝体ファミリーです。 文字の大きさの揃った現代的な明るい漢字と、伝統的な字形を生かし
ゴシック体 明朝体 丸ゴシック すべて カッコのみ 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
何週間か前に書いたと思っていた記事が見当たらないのでメモ。 下記の2016年の記事が閲覧ランキングに上がっていたので、8月の案件で再度調べたときの参考URLをちょいちょい補足します。 Noto Sans JPをCDN経由で使う 2018/8/27にツイッターで投稿されてた劇的にロードが早くなった日本語漢字フォント、にはいっていました Japanese web fonts now load faster than ever! We just added 6 new kanji fonts using our ⚡️⚡️⚡️ fast delivery system → Check ‘em out in our catalog, https://t.co/6PAeAIrnXo pic.twitter.com/jlH58JSesC — Google Fonts (@googlefonts) Aug
プラカンブログ ホームページ制作に関する役立つ記事からおもしろ記事など。 プラスデザインカンパニーの スタッフによるブログです。
ローカルに"Noto Sans CJK JP"がなければWebフォントの"Noto Sans JP"を利用するCSSの指定方法fontwebfont 2018年6月29日現在、ウェブフォントの「Noto Sans JP」で字詰めできなくなっていることを確認しました。 Googleが仕様を変更したのかもしれません。 "Noto Sans JP"のウェブフォントを利用すれば、すべての機器で文字表現を統一できます。 しかし、日本語のウェブフォントは容量が大きいです。 すでにローカルに"Noto Sans CJK JP"がインストールされているなら、ウェブフォントを読み込まずにそちらを利用したい。 そんな要望をかなえる方法です。 結論 "Noto Sans JP"のCSSにlocal("Noto Sans CJK JP <太さ>")を追加するだけです。 元となるCSS 改変したCSS 表示確認用の
文字の「書体」=フォントについて意識したことはありますか。新聞や本、スマホなどで読まれる文字にはその用途にあった様々なデザインの書体が使われています。そんな中、開発に10年かけたある書体がいま、教育現場で注目を集めています。 大阪府和泉市で看板店を営む板倉賢治さん(53)。板倉さんは看板制作の傍ら、定期的に自分で手書きした作品を1年ほど前からSNSに載せるようになりました。 Q.全部手書きですか? 「そう、手書き。下書きはなしで」(板倉賢治さん) 国内でこの技術をもつ職人は数少ないといいます。そしてこの文字にはある特徴が。 「これ『角ゴシック』。角が角ばってるやつ。これ『丸ゴシック』。『ナール』って知らん?阪急電車の駅標、あれナールやで」(板倉賢治さん) 板倉さんは客が発注したイメージに合うように文字の形をあらわす「書体」にこだわりを持っています。その種類は『明朝体』と『ゴシック体』など、
Adobe Fonts ユーザガイド はじめに システムおよびサブスクリプション要件 ブラウザーと OS のサポート コンピューターへのフォントの追加 Web サイトへのフォントの追加 CC Mobile でのフォントの追加 フォントのライセンス フォントのライセンス アカウントの管理 Creative Cloud エンタープライズ版のお客様へのライセンス供与について アカウントへのフォントライセンスの追加 サブスクリプションライブラリからのフォントの削除 中国で登録された Adobe ID は Adobe Fonts の利用対象外 Creative Cloud サブスクリプションにこれらのフォントが含まれていない理由 2021 年 9 月に Morisawa フォントを一部提供を停止 フォントの入手と使用 Creative Cloud アプリケーションでの Adobe Fonts の使用
フォントワークス株式会社(本社:福岡県福岡市、代表取締役社長CEO:原田 愛、以下「フォントワークス」)は、2017年9月27日より、アドビ システムズ社のAdobe Creative Cloudに付随するフォントライブラリサービス「Adobe Typekit」に、フォントワークス書体の14フォントを提供開始したことを発表します。 今回、「Adobe Typekit」で提供を開始する書体は、フォントワークスのフラグシップフォントとして人気の「筑紫書体シリーズ」の丸ゴシック体「筑紫A丸ゴシック」「筑紫B丸ゴシック」をはじめ、「マティス」「ロダン」「スーラ」など、フォントワークス書体で印刷からデジタルメディアまで使用頻度の高い定番書体、また、ユニバーサルデザイン仕様にデザインされたUD書体などです。 高品位で、DTP、WEB、デジタルコンテンツなど多様な媒体で仕様実績の豊富な、フォントワークス
今日は、誰でも無料で利用できる Google Fonts の中から、オススメのサンセリフ体のフォントを11個まとめて紹介します。 サンセリフ(仏: Sans-Serif)とは、セリフのない書体の総称である。セリフとは、文字の線の端につけられる線・飾りで、「うろこ」、「ひげ飾り」、「ひげ」とも呼ばれる。旧来のセリフのついた活字書体(セリフ体・ローマン体とも呼ぶ)と区別するために用いられる用語。「サン」とは、フランス語で「〜のない」という意味で、「セリフのない書体」を表している。グロテスク体とも呼ばれる。 Wikipedia サンセリフ体で有名なものでは『Heveltica』や『Gill Sans』や『Futura』などのフォントが挙げられます。 残念ながらこれらのフォントは版権などの事情があり Google Fonts では扱っていません。しかし似たような書体ならウェブフォントで無料で利用す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く