日本人開発者向けの最適解？ GitHubフォント＋IBM日本語フォント＝「Moralerspace」／「Monaspace」と「IBM Plex Sans JP」をかけ合わせ、5スタイル×6つの全半角調整【レビュー】
意外と奥深いCSSのfont-weightの話 - ICS MEDIA
普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。ほかにもCSSの設定によっては意図しないウェイトが適用されてしまうこともあります。 この記事ではフォントウェイトのまつわる落とし穴と、それを回避するための方法を紹介します。エンジニアだけでなく、デザイナーの方にも役立つ内容です。 Noto Sans JPを例にフォントのウェイトの設定を変えながら見え方を確認できるデモページを用意しました。ぜひ試してみてください。 サンプルを別ウインドウで開く コードを確認する アンチエイリアス まず、アンチエイリアスについて簡単に説明します。アンチエイリアスとは、画面上で表示される輪郭を色の濃淡などを用いて滑らかにする処理
游を font-family で指定した時に IE で生じる謎余白対策 | Thought is free
IE で游ゴシック・游明朝を指定した時に IE で生じる謎の余白 いまだに、IE 11 のシェアが多いので、 この手のバグへの対策は、メンドー臭い。 IE の場合、「メイリオ」以外だと、line-height が効かなくなるバグもある。 単純な話、IE では、font-family の先頭で「メイリオ」フォントを指定しないとダメですね。 （同じ Microsoft でも Edge なら、メイリオ以外でも問題ない） 参考サイト 最近は、Windows と Mac で同じフォントにするため、「游ゴシック」を指定してるサイトもあるが、その場合は、IE だけメイリオにする CSS ハックした方がいいと思う。 例えば、font-family を ↓ このように指定してるなら、 body { font-family: "游ゴシック",YuGothic,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro
CSS Font Loading Module Level 3を試してみた - console.blog(self);
1年以上前から、ちゃんと調べたいと思っていたけど、やっていなかった。 CSS Font Loading Module Level 3は、2014/06/30時点で最終草案(Last Call Working Draft) になっている。CSS Font Loading Module Level 3はフォントのローディングに関する仕様書。 CSS Font Loading Module Level 3 - W3C Last Call Working Draft, 22 May 2014 最新のEditor's Draftはこっち。 CSS Font Loading Module Level 3 - Editor’s Draft フォントについての仕様書はCSS Font Module Level 3で、2014/06/30時点で勧告候補(Candidate Recommendation)にな
Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い？ | Cherry Pie Web
（2016年7月26日：フォロー記事を書きました。「Windowsで游ゴシックが汚いのは、結局誰が悪いのか？」） （2016年7月11日追記：Windows8.1においても細字ではなく標準が使用されているのではないかというご指摘を受けて、若干表記を修正しました） （2016年6月29日追記：Twitterでご指摘を受けて、Windows8.1と10での違いを追記しました） （2017年3月27日追記：当サイトでの使用CSSについて追記しました） （2020年9月13日追記：当サイトでの使用フォントについて追記しました） タイトルが旬を外していて、しかもちょっと釣り気味で申し訳ありません・・・ OS X MavericksとWindows 8.1に共通のフォント「游ゴシック」・「游明朝」が搭載され、CSSのfont-familyに「游ゴシック」を指定すれば、Webデザイナーの長年の悲願であっ
CSSのvw, calc()を使用した、レスポンシブ対応のフォントサイズを指定するこれからのテクニック
本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精
ブラウザでレンダリングされているフォントを確認する - console.blog(self);
以前はWhatFontでフォントを確認していたけど、最近ではブラウザの開発者ツールでレンダリングされているフォントを確認できる。けっこう有名だと思っていたけど、そうでもなかったのかなーと思って書いてみる。 WhatFont ChromeのExtensionがあるし、クロスブラウザなブックマークレットもある。IE9でもちゃんと動く。 WhatFont Tool - The easiest way to inspect fonts in webpages « Chengyin Liu WhatFontについては、けっこう前だけどここに書いたので割愛。さらっと確認した感じでは、そんなに変わってないと思う。 Web Fontsの歴史と使い方（2）：好みのWeb Fontsが使えるツールを探そう - ＠IT Chrome 気になる文字を選択して、右クリックのメニューから「要素を検証」を選択する。もち
TCPDFでいつの間にか日本語のフォント・サブセットが使えるようになってた！！ – 大阪のシステム開発・WEBシステム開発会社技術担当スタッフの覚書き、子だぬきの技術習得ノート
いつもお世話になってるTCPDFですが VER 5.2.000よりフォント・サブセットを使用できるのは知っていたのですが 日本語で使用するとCPUとメモリを使いすぎて使い物になりませんでした・・・ 今までどおりフォントの全て埋め込みで対応していたのですがやはり3MBオーバーは重いなーと思っていました。（バックアップ用に生成したPDFとか置くのはとても無理でした） 以前案件で軽いPDFを出す必要がありだめもとで新しいTCPDF（6系）を使ってみたところ・・・ 使えるようになってました！！（数100kbとかで出力できたりします。） これでお客さんに重いって言われなくなります！ 以下サンプルと注意事項です。 require_once('tcpdf_include.php'); require_once('lang/jpn.php'); $pdf = new TCPDF('L', 'mm', 'A
もう迷わない、「@font-familyはこれでOK！」を色々考えてみた。 | unitopi - ユニトピ -
Macだから、Windowsだから、Androidだから… 端末それぞれの表示状態を気にしながらフォントを考えるのって大変ですよね。 とりあえずコレにしておけばいいや、というコピペ用テンプレが皆さん存在するのではないでしょうか？ 基本 font-family: sans-serif; sans-serif、つまりゴシック体であることを指定しています。 ただしそれ以上の指定ではないので、ブラウザ標準のものが使われます。WindowsであればメイリオとかMSゴシック系、Macであればヒラギノ角ゴシック系となります。 Windowsのことを考えると明瞭が由来でもあるメイリオがアンチエイリアスがかかって見やすいです。 しかし、Macの場合はヒラギノを優先させたいですよね。。 Macだと、多くのブラウザで日本語表記のフォント指定は無視されます。 つまり、“メイリオ”は読み込まれず、“Meiryo”と
webフォントの使い方＆日本語対応webフォントまとめ
【スタイル】は東京都渋谷区でホームページ制作を行うウェブ制作会社です。ウェブサイト制作、SEO対策、ウェブマーケティングなどを承っています。良質テンプレートでの格安ホームページ制作プランもあります。
WOFFコンバータ
TrueTypeフォント、OpenTypeフォントからWebフォントであるWOFF、WOFF2を作成します。WOFF、WOFF2からフォントに戻すこともできます。 Windows版 Mac版 概要 フォントとWOFF、WOFF2の相互変換を行うソフトです。 WOFFはWeb Open Font Formatの略で、Webフォントの1形式です。 変換元のフォントとしては、TrueTypeフォント（拡張子 .ttf）、OpenTypeフォント（拡張子.otf）、Windowsにおけるフォントにリンクする形式の外字ファイル（拡張子.tte、.ote）を指定できます。 WOFFの作成と同時にEOT（Embedded OpenType）ファイルを作成することもできます。ただし、Windos版で作成したEOTファイルは圧縮されていますが、Mac版では圧縮されていません。 WOFF、WOFF2をTrue
サブセットフォントメーカー
Windows版 Mac版 概要 フォントから指定された文字列だけを取り出して、ファイルサイズを小さくしたフォントを作成するソフトです。 変換元のフォントとしては、TrueTypeフォント（拡張子 .ttf、.ttc）、OpenTypeフォント（拡張子.otf、.ttc）を指定できます。 変換後のフォントをWOFFコンバータでWOFF（Web Open Font Format）に変換すればさらにファイルサイズを小さくできますので合わせてご利用ください。 商用利用可能です。 本製品はフリーソフトです。 本ソフトはサポート対象外ですので、予めご了承ください。 注意事項 あくまでもWeb用のフォントを作成するためのソフトで、作成したフォントをパソコンにインストールして使うことは考慮していません。 フォントが、ヒント(OpenTypeフォントの場合)、カーニング情報、ビットマップデータ、OpenT
【Font】Google Web Fonts で日本語フォントの［Noto Sans Japanese］を使う。
【Font】Google Web Fonts で日本語フォントの［Noto Sans Japanese］を使う。 これ、いつから使えるようになっていたのでしょうか？ 今さらなのかもしれませんが Google Web Fonts で日本語フォントの［Noto Sans Japanese］が利用できるようになっていたので、その導入方法を紹介します。 「Noto Sans Japanese」って何？そもそも［Noto］とは Google と Adobe が共同開発したフォントで、昨年（2014年）の7月16日にリリースされました。 世界中のあらゆる言語がサポートされていて、文字の太さ（font-weight）は７種類も用意されています。 当然、日本語にも対応しており、国内のデザイナーの方々が歓喜して導入・利用をはじめたのはまだ記憶に新しいですね。 リリース当時、弊社のブログでも大々的に取り上げま
プログラミングが超捗る！コーディングにおすすめフォント10選
更新日: 2017年2月27日公開日: 2015年4月30日プログラミングが超捗る！コーディングにおすすめフォント10選 "CodeCampus"はオンラインプログラミングスクール No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアです CodeCampとは？（受講生体験記） 「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。元バレエダンサーの挑戦普通の文系大学生/営業職が、エンジニアへ転職し起業するまで成長の記録 プログラミング初心者にとって、コーディングの数字と記号、アルファベットの羅列を見るだけでもストレスがたまります。 間違えやすい文字1tl|ijo0OB8- よく使われる記号<>&“^$\/()|?+*[]{},. そんな見にくいコーディング画面も、以外とフォントを変えるだけでグッと見
プログラミングフォント Myrica
プログラミング用フォント Myrica Myrica （ミリカ）は、フリーなプログラミング用 TrueType フォントです。 視認性、判別性 が高くなるように、複数のフォントファイルを元に合成/修正しました。 フォントの特徴 多くの特徴をプログラミング用フォント Ricty から継承しています。 ASCII文字は「Inconsolata」が適用されます。 それ以外の文字には「源真ゴシック」または「Mgen+」が適用されます。 半角文字と全角文字の横幅の比が 1:2 に調整されています。 視認性の高い日本語文字 (半濁音など) が使用できます。 Rictyにない特徴 以下の文字にはヒンティング情報がありますので、Windowsでもクッキリしています。 ASCII文字はヒンティング付きの Inconsolata から、ヒンティング情報を継承しています。 平仮名と片仮名にもヒンティング情報を付
視認性の高いプログラミングフォント「Myrica」をWindows＋Sublime Textで使う方法
Myricaとは Myrica （ミリカ）は、無料で使えるプログラミング用 TrueType フォントです。 視認性、判別性 が高くなるように、複数のフォントから合成され作成されました。 Myricaの特徴 Myricaは、多くの特徴をRictyから継承しています。 主な特徴は、以下のように挙げられています。 ASCII文字は「Inconsolata」が適用されます。 それ以外の文字には「源真ゴシック」または「Mgen+」が適用されます。 半角文字と全角文字の横幅の比が 1:2 に調整されています。 視認性の高い日本語文字 (半濁音など) が使用できます。 Rictyにない特徴 Rictyにない特徴として、ASCII/ひらがな/カタカナにヒンティング情報が付加されています。 これにより、低解像度や、小さな文字サイズで表示させても、可読性が高くなるようになっています。 特徴のイメージ 特徴に
グーグルが日本語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:/
プログラミングが捗りすぎる！コーディングに最適なフォント12選 - paiza times
Photo by Linux Screenshots こんにちは。谷口です。 エンジニアの皆さんは、プログラミングをする際にどんなフォントを使用していますか？ 「特にこだわりないからデフォルトのまま」という方も多いとは思いますが、プログラミング中は大量の文字を読んだり書いたりし続けるわけですから、なるべく可読性が高くてストレスが少なく、また自分の気に入ったフォントを見つけた方がよいのではないでしょうか。 そこで今回は、エンジニアの皆さんにお勧めの、プログラミングに最適な無料フォントを11個ご紹介いたします。 ■どういうフォントが見やすいの？ フォントには、セリフ体というものとサンセリフ体というものがあります。 セリフとは、文字の線の端につけられる「ひげ」のような、線・飾りのことを言います。 例えば、上の図でいいますと、上のフォント（MS明朝）がセリフ体、下のフォント（MSゴシック）がサンセ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日本語プログラミングフォント「PlemolJP」v1.0.0が公開／全角空白を可視化するなどの工夫を凝らす
無料の日本語フォント【Noto Sans Japanese】があまりにも美しいので、ブログに使ってみた | CriativeTips
