游ゴシックのfont-family指定方法！@font-faceは絶対NG！WindowsのChromeでかすれる問題徹底検証 | WEMO游ゴシックは素晴らしい。まず前提としてこれは間違いのないことです。 ただ、面倒くさい問題があるんですよね。 そう、かねてより議論されている、「WindowsのChromeで見にくいんすけど」問題。 この問題についてちょっと調べればわかるのですが、@font-face で解決している人がかなり多いです。僕も以前までそうしていました。
2018年のウェブフォントについて
少しの間Noto Sans Japaneseを利用していたが、すぐに止めた。やはりFOITが気になる。かといってFOUT強制も苦肉の策という印象しかない。……このような記事を書いていたら、先にうまくまとまったfont-displayデスクリプターについての記事が広まっていたので、そちらを読むのが良い。 他が高速・即時化しつつある現在、1MBくらいを超えるウェブフォントはどうにもならない。動的なサブセット化はわからなくもないが、労多くして……という印象だ。自前で作るのも難しいし、安心して任せられる速さの提供者は知らない。 回線の状況(種別ではなく)に応じてうまいこと切り替える仕組みを導入しなければならないだろう。そうなるとデバイスから「今、回線あんま速くないです……」といった動的な情報を得たいが、プライバシーにかかわるので難しい。残る可能性はfont-displayデスクリプターのみだ。 @
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
文字詰めできるCSSのfont-feature-settingsプロパティについて検証してみました | briccolog
検証結果詳細 Windows（メイリオ） 見たまんまですが何も変わりません。前述の記事にもあるように、メイリオはOpenTypeフォントではあるものの、プロポーショナルメトリクスを含まないので、font-feature-settingsプロパティの影響を受けません。 Windows（游ゴシック） font-feature-settings:palt; 約物（句読点、かぎ括弧、中黒）を含む和文フォントの文字間がきちんと詰まっています。 行頭がかぎ括弧や中黒になっている場合でも、ツラがそろっています。 全角英数字の文字間も詰まってますが、半角英数字とは異なる文字幅になっています。 font-feature-settings:pkna; 仮名や仮名関連の字形については文字間が詰まってます。 約物の前後についてはデフォルト同様に字詰めが効いていません。 Mac OS X (El Capitan)
これから使い始めたいWebフォント＆Google Font活用法まとめ
日本語Webフォントも充実してきて、本腰を入れてWeフォントを使ったサイトデザインをすすめている人も多いことでしょう。Webフォントの選び方や組み合わせ方、滑らかに見せる方法、実装の舞台裏など、Webフォント関連記事をご紹介します。 1.Webフォント選びを楽しくするツール 『文字好きにはたまらない！Webフォント選びが楽しく捗るツールたち』（WPJ） Webフォントのおかげで文字の表現力が格段にアップした今日この頃。選択肢が増えたのはいいけど、選ぶのが大変すぎる…。そこで、フォント選択と導入が捗るツールがまとめられています。 2.Webフォントサイトを30紹介 『【保存版】和文のWebフォントサイト30選』（ferret） Webフォントを使用すると、表現できるデザインの幅が格段に広がります。日本語に対応しているWebフォントは少ないとはいえ、いろいろと工夫をこらしたフォントがダウンロー
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デザイナーの長年の悲願であっ
ウェブサイトでシステムフォント
GoogleのRobotoや、AppleのSan Franciscoなど、OSベンダーが独自のフォントを開発し、自社製品のUIにシステムフォントとして採用する、という事例が相次いでいます。これらのフォントは、プラットフォームの特性を考慮して最適化されたもの（あるいは最適なものとして選ばれたもの）と言え、かつ今後のOSのアップデートにともなってさらに改善されることも期待できます。また、ユーザーがそのシステムを操作するときにもっとも頻繁に触れる、つまりもっとも見慣れているフォントでもあります。というわけで、これらシステムフォントをウェブサイトのUIに採用するというのはかなり良いアイデアに思えます。 一方で、システムフォントはあくまでUIのためのもので、長い文章などには向かない場合もあるので、コンテンツ部分は別のフォントを指定すると良いかもしれません。たとえばMediumなどではそのようなアプロ
font-smoothingでOSXでのフォントのレンダリング方法を調整する - Qiita
Non-standard であることに注意すべき Non-standard This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future. https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth MDNにもこう記載があるとおり、正式な仕様策定のトラックからは外れています。 影響範囲や、ブラ
The Typekit Blog | Font metrics and vertical space in CSS
We put a lot of effort into the quality of the fonts in the Typekit library. As part of that work, we’ve been researching the relationship between font math and CSS, and would like to share what we’ve found. If you’ve ever wondered why some fonts look smaller than others at the same typeset size, or why the vertical space between lines of text is such a guessing game, this post is for you. Font ma
【Apache】Rewriteのクエリ文字列のエンコード、デコード at softelメモ
問題 Rewriteでパラメータをつけると、%エンコードされていたものがデコードされたりする？ 答え エンコードさせたり、させなかったりできる。 .htaccess で以下のようになっているとき RewriteEngine On RewriteRule ^index.php\x3F(.*)$ ./?$1 [L] 以下のようなURLにアクセスすると、 /index.php%3Fcode%3DXXXXXXXXXXXXX%252B3XkFG%252BGcNb%252B%252BlgqN7I9Pv2LjMTQm8%253D $_GET はこうなりました。 ["code"]=> string(44) "XXXXXXXXXXXXX+3XkFG+GcNb++lgqN7I9Pv2LjMTQm8=" アドレスバーに入力 /index.php%3Fcode%3DXXXXXXXXXXXXX%252B3XkFG%
El Capitan登場で、CSS font-familyはこう変更しよう | ほりべあぶろぐ
Mac OS X 10.11 El Capitanの登場で新たなフォントが使えるようになったので、CSS font-familyの変更例を紹介します。 El Capitanの新フォント OS X El Capitanでは、新たに4つのフォント「クレー」「筑紫A丸ゴシック」「筑紫B丸ゴシック」「游明朝体+36ポかな」が追加されました。さらに、おなじみ「ヒラギノ角ゴ」に新たなウェイトが追加され、W0〜W9までの全10ウェイトをすべて利用できるようになりました。 OS X El Capitanには4種の新しい日本語フォントが追加！ 新フォントに関しては、普通のウェブサイトで使うことはあまりないかもしれません（使っても面白そうだと思います）が、ヒラギノ角ゴの利用に関してはフォント名の変更という注意点があります。 Hiragino Kaku Gothic ProN → Hiragino Sans ヒ
1文字だけの改行の拒否
日本語の文章では任意の位置で改行できるため、レスポンシブ・ウェブ・デザインでは多くの場合、望まない位置での改行が起きる。例えば最後の1文字だけ次の行になってしまうと、読みやすさや理解度に致命的な影響を与える。例えば「？」だけ次の行に送られた場合、あるとないのでは大きく印象が変わるだろう。Twitterで@Takazudoと@oosugi20の会話を見て、やはりみな似たようなことは考えるものだと感じ、このあたりのことについて書いてみたくなった。 僕はjQueryで最後の五文字では改行が起きないようにいじったりしていた(うろ覚えで書いたもので、実際にはもっと複雑にやっていたと思う)。見出しがテキストのみの場合、最後の数文字の間に非改行ゼロ幅スペース(U+FEFF)を仕込むことで、その間で改行が起こらなくなるという仕組みだ。ここでは比較のためにクラスで判定するように書いてあるが、実際にはh1から
合コン失敗したら風俗
女子大生がたくさん働いているデリヘルのサービス。深夜でも使える風俗として、自分の暮らしを豊かにしてくれているデリヘルです。有名大学に通う女性を指名した今回は、思い出しただけでも興奮が甦ってくるほど。素股の気持ち良さは挿入を超えるくらいの感覚でした。その秘密は敏感なクリにあります。素股をするとどんどん刺激されてクリが固くなり、それが亀頭に当たって気持ち良い。相手も擦れて気持ち良いという相乗的な魅力に浸るのが、今までの風俗史上最高の体験になったのです。素股はぎこちなさもあるのですが、それでも密着度が高くてアソコへの刺激は十分すぎるほど。途中で耐えることを諦めていれば、きっとサービスから半分も消化しないうちに果ててしまっていたと思います。しかし、僕は風俗MASTERです。そんなことできません。キスも大好きらしく、クンニをした後でも何度となく「チューしてほしい」とお願いされたので、舌を絡めてじっく
安全でアクセシブルなアイコン・フォント
Translation of: Bulletproof Accessible Icon Fonts by Filament Group アイコン・フォントを利用する場合、あらゆるユーザーに適切にアイコンを提供しようとすると、かなり気をつける必要があります。そのフォントが読み込まれなかった時にどうなりますか？@font-faceがまだサポートされていないブラウザーでは？ どうすれば安全に(bulletproofに)アイコン・フォントを利用できるかをこれから解説したいと思います。 効率的で機能的なウェブサイトを制作するという、この終わることのない探求において、ベクター形式のアイコンを提供する手段として、簡便であるフォントを利用することが何度も提案されてきました。対して私達は通常ベクター形式のアイコンとしてSVGをIan Featherがブログ書いたような理由から選んで(また、薦めて)おり、既に
リガチャー(合字)を使うとき必要なCSSプロパティーの解説
どちらかというとこっちが本題だったんですが、文章が長くなる感じだったんで分けてみました。リガチャーアイコンフォントを使うにはまずはWebフォントの指定を知ってから、という感じですね！というわけでWebフォントのCSS指定について知りたい人はWebフォントのCSS指定2014年度版とこれまでの歩みを読んでみてください。 リガチャーアイコンフォントの実例 もともと私がリガチャーアイコンフォントというものを知ったのは@fladdictさんのアイコンを合字Webフォントとして扱うSymbolSetが革新的にステキ | fladdictという記事でした。ここで紹介されたSymbolsetを知ったときはかなりの衝撃を受けました。 そして@kudakurageさんが制作したLigature Symbolsなどの登場もあり、アイコンフォントには実装の多様性が生まれたように思います。 以下はデモです。 Se
[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)
ウェブ・フォントの読み込み - Weblog - Hail2u.net
ウェブ・フォントも完全に行き渡り、今はどう効率的に配信するかについて多くの時間を割くようになった。Google Fontsの低め安定路線を見限り、TypeKitやFonts.comへ鞍替えする人々も増えた。それと同時に自前でホスティングする人々も徐々にその数を増やしており、どれが最適解なのか一応の結論が出るにはもう少しかかるだろう。まず、ウェブ・フォントの読み込みにおいてどのようなアプローチがあり、どのようなメリット、そしてデメリットがあるのだろうか。 TypeKit等に頼るにしろ、自前でホスティングするにしろ、もちろん最終的にはウェブ・フォントをブラウザーに送りつける必要がある。読み込みとはまさにその部分の話だ。話がややこしくなるので、多様な実装を意識した安全な書き方などについては触れない。 普通に@font-face定義を利用 @font-face定義をただ普通に書く場合のメリットは、
CSSでのフォント指定について考える（2014年）｜DTP Transit
結論1：アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2：「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。 「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。 参考： ウィキペディア - ヒラギノ 「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い CSSのfont-family指定はこれで決まり！（2013春） 結論2：新しい字形に対応をしている「ヒ
山崎良祐 / Ryosuke Yamazaki on Twitter: "フォント指定する場合に「ヒラギノ角ゴ Pro」ではダメで、「ヒラギノ角ゴ\tPro」と指定しないといけないことに気づくまで2時間かかったのが今日のハイライト"
フォント指定する場合に「ヒラギノ角ゴ Pro」ではダメで、「ヒラギノ角ゴ\tPro」と指定しないといけないことに気づくまで2時間かかったのが今日のハイライト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tipografía Web Efectiva: Reglas, Técnicas y Diseño Adaptativo - Designmodo en Español