不用意に font-feature-settings を使うと日本語表示がおかしくなる - 果樹園
CSSでOpenTypeフォントの機能を制御できるようになった結果、欧文ページで font-feature-settings: "dlig"; が指定してあると、日本語に機械翻訳して読もうとした時に合字になって欲しくないところまで合字になってしまう。 「〜になります。」が「〜になり〼。」になる。— りんご🍏夜明けのリモートワーカー (@mstssk) April 17, 2024 本日は晴天なり <div style="font-feature-settings: 'nalt';"> 本日は晴天なり </div> 環境にインストールされているフォント次第だと思うので、手元のスクショも。 ※mac上のChrome。 記事を書いたきっかけのツイート https://twitter.com/yodare_inu_/status/1780431031218343978 参考 font-featu
CSSでフォント・ファミリーのショートカットを作る
最近のブラウザーではlocal()を使ってフォント・ファミリーのショートカット(的なもの)を作ることができる。CSS Fontsモジュール仕様のsrcプロパティーの項にも思いっきり書いてあるんだけど、今まではそんなに必要なかったのであまり使われていない。5ウェイト展開なヒラギノ角ゴのiOS 7へのバンドルと、3ウェイト展開の游ファミリのWindowsへのバンドルにより必要性が少し増えた気がする。 特に游(ゴシック|明朝)はWindows 8.1とOS X 10.9でファミリ名が違う上、少し古いFirefoxでのアレとか、OS Xには細字がないとかもあるので、色々考慮するとfont-familyプロパティーではややこしいフォント指定を行う必要が出てくる。そうやって出来た長いリストのfont-familyは読みづらく、デバッグのしづらさにつながる。local()を使ってフォント名を作り直してや
アイコンフォントをコマンドラインで生成できる「Font Custom」:phpspot開発日誌
Font Custom アイコンフォントをコマンドラインで生成できる「Font Custom」 ベクター形式のアイコンをフォントファイルに1個にまとめてフォントのように扱えるけど実はアイコン、なアイコンフォントをコマンドラインでジェネレートできるツールです。 SVGファイルをまとめておいてコマンドラインを叩くとCSSとフォントファイルが生成されます。 単にフォントファイルにまとめるだけでなく、CSSを利用して次のようにテキストの横にアイコンを表示することができます。 フォントなので、テキストの色変更やサイズ変更に対応でき、CSSのフィルタにも対応可能です。 フォントアイコンでサイト作成を効率化したい方は覚えておくとよさそうですね。 関連エントリ フリーのアイコンフォント１０まとめ メジャーなアプリケーションのアイコンフォント「Pictonic」 オシャレなアイコンが詰まったアイコンフォント
いまさら聞けないCSS font-familyのまとめ
CSSのfont-familyについて調べてみました。そのうちWebフォントが主流になる気がしますがそれまでのまとめということで。 認識誤りがありましたらどこかでつぶやいてください。 １．font-familyとは？ 通常のフォントや太字、イタリック体、斜体など、デザインを統一した複数のフォントをまとめたものを「フォントファミリー」といいます。 「Arial」「Vernada」「ヒラギノ角ゴPro W3」「ＭＳ Ｐゴシック」などがフォントファミリー名です。 このフォントファミリー名を指定するためのプロパティが「font-family」です。 サンプル body { font-family: Verdana,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
もうアイコン画像はいらない！ Webフォントを使って、iOS風タブバーとアイコンを作成する方法
こんにちは、鴨田です。 最近、アイコンがセットされたWebフォントを使うことで、 画像を使わずにアイコンを表示するという手法が流行っていますね。 すごく興味はあったのですが、なかなか使う機会もなく、 便利そうだなと思っていただけで、今まで使ったことがありませんでした。 しかし、先日、とある案件でやっと使う機会に恵まれたので、やり方をご紹介いたします。 (プロトタイプだけ作って、結局プロダクトとしては使いませんでしたが・・・) 最近話題になっていたこちらのサイトがとても便利です。 Fontello - http://fontello.com/ 使いたいフォントを選択します。 ここでは、「Entypo」フォントから5つ選択します。 選択が終わったら、上部のタブから「Edit codes」をクリックします。 アイコン画像の上部のバーをクリックして、アイコンに割り当てる文字列を決めます。 英語で頭
Web Fontを使ったソーシャル系サービスアイコン集·OpenWeb Icons MOONGIFT
OpenWeb Iconsはソーシャル系サービスを表現するのに使えそうなWeb Fontです。 文字の横にちょっとしたアイコンを載せるとその意味がぐっと分かりやすくなることがあります。そんな時にはこれまでごく小さなアイコン画像を使うのが一般的でしたが、今回はWeb Fontを使ったOpenWeb Iconsを紹介します。 サンプルです。 実例です。こういう使い方は良いですね。 HTMLでの指定方法です。Bootstrapライクです。 OpenWeb Iconsは現時点で19種類のアイコンが登録されています。EOT/WOFF/TTF/SVGで作成されており、それぞれをCSS上で読み込んで使います。なおBootstrapと組み合わせることで、Bootstrapのアイコンのように指定して使えるようになっています。クラス名に-coloredをつけるとカラーになります。 OpenWeb Iconsは
意外と知らない？アイコンはWebフォントでつくるとこんなに便利！
Webフォントでアイコンをつくろう！ ゆとりジェネレーションのほんだです。 最近、Webフォントを使用する仕事に多く携わった関係で、 Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。 ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。 （以下のデモはGoogle Chromeなど、モダンなブラウザ推奨です。） jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS アイコンを作成するだけだと、あまり新鮮さはありませんが、 CSS3時代のいま、これはとっても有効なマークアップ方法となっています。 詳しくは、つづきからどうぞ！ 色をつける フォントなのでCSS「color:」で指定するだけで色をつけられます。 もちろんマウスオーバー時に色を変更するのも、C
[CSS]フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック
フォントのサイズの単位に何を使ってますか？ px？ em？ それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
[CSS]コピペで使える、テキスト周りをかっこよくするCSS3のエフェクト集
CSS3 Cookbook: 7 Super Easy CSS Recipes to Copy and Paste [ad#ad-2] 対応ブラウザはCSS3を使用しているため、CSS3をサポートしているブラウザのみで、一部のものはWebkit系（Chrome, Safari）のみとなっています。 Letterpress（レタープレス） Small Caps（スモールキャピタル） CSS Coupon（クーポン券） Stitched（ステッチ） Gloss（グロス） Stroked Text & @font-face（@font-faceを使ったストローク） Double Stroked Text（二重のストローク） Letterpress（レタープレス） レタープレスのエフェクトには、3つのカラーが必要です、背景のbackground、テキストのcolor、テキストの影のtext-sha
フォントサイズの比率をemや%を一覧で表示する - MdN Design Interactive
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──コーディングに使えるツール（2） [technique 09] フォントサイズの比率をemや%を一覧で表示する 文＝ハヤシユタカ（（有）ムーニーワークス） Tool PXtoEM URL http://pxtoem.com/ デザイン作成時において、テキストはpxかptで作成し、コーディング時には%かemが主流になっているが、pxかptでの文字サイズは「PXtoEM」を使用すれば、デフォルトのフォントサイズを決め、その数値からフォントサイズの大小比率をemや%を一覧表で表示してくれる。そのほか「Get CSS」でCSSファイルを参考にしたり、カスタムフィールドで細かい数値の参考値を計算したりしてくれるので、まだ文字の調整に自分のルールを持っていない人にオススメのツールだ。 左のリストからベースにしたい文字
CSS - font-familyを明示指定してみた : 404 Blog Not Found
2008年07月30日04:00 カテゴリTips CSS - font-familyを明示指定してみた ごもっとも。 はてなブックマーク - turing_patternのブックマーク / 2008年07月29日 もし可能ならば Vista&IE7 にもフレンドリーにしていただけないでしょうか VistaのIE7でsans-serifがGulimになる - 三日坊主と呼ばせない！日記自宅マシンをVistaに入れ替え、本運用を開始してから2週間くらいたつわけなのだけれど、今日たまたまとあるサイトを表示したときに？？？な事態に。というわけで、CSSを以下のように変更しました。 Before: font-family:san-serif /* ... */ font-family:serif After: font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku G
font-sizeのパーセント表記一覧 - Webtech Walker
font-sizeはpxやptなどで指定するとIEで拡大、縮小ができないので、パーセントなどで指定することが多いと思います。しかし、パーセントで指定すると、ブラウザごとに大きさが違ったりします。そこで、基本サイズが12px～16pxのときに10px～26px相当を表示するパーセントの数値を計算して、各ブラウザで確認したものをまとめました。 注意点 これは僕が自分で確認できる環境でのみ動作確認を行っています。動作確認したブラウザは以下になります。 Windows IE6 IE7 Firefox2.0.0.14 Opera9.27 safari3.1 Netscape7.01 Mac Firefox2.0.0.14 Opera9.27 Safari3.1.1 Safari2.0.4 IE5.2 計算式は以下のとおりです。小数点以下は四捨五入するとブラウザ間で差異でるようなので、切り上げることで
blog in a fog » フォントサイズ指定方法の検証
※検証環境 Windows: IE6, IE7, Firefox2, Opera9, Safari3b Mac: Safari2, Firefox2, Opera9 XML宣言なし、標準準拠モード、utf-8 font-family指定なし これできれいに揃うはず。揃いませんでしたすみません！（↓追記あり） 検証に使ったHTMLファイルはこちら（Win/Firefox2を基準に作成。フォントサイズが変わるところにhrを入れてpx指定のテキストを並べた。比較しやすいように右寄せに。このファイルを各ブラウザで表示させて検証）。 お気づきのようにYahoo! UI Libraryのfonts.cssをもとに作成してます。 たとえばYUIでは12pxは92%となっているけど、これは93%でないとOperaで1サイズ小さく表示されてしまいます。最初は*font-size:smallで検証していたんで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Icons | Font Awesome
電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～
CSS3を使って超簡単タイポグラフィ | AUTHORITY SITE
サイト上でCSSによるフォントスタイルを確認できる便利ツール:phpspot開発日誌