HTMLで文字詰めするタイポグラフィー用JS | fladdict
HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する
Google Font Directory
The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and served by Google servers. View font details to get the code needed to embed the font on your web site. Please also visit our quick start guide and FAQ page. For more help and suggestions, use our moderator page
13 か 15
先日、Twitter で @smashongmag (Smashing Magazine のアカウント) からこんな問いかけがありました: What font-size do you usually use for your body copy? (If em, convert to px): 11px, 12px, 13px? Let us know! #smfont 「(Web ページの) 本文のフォントサイズっていつも何ピクセルにしてる?」というわけですね。この問いに対するぼくの答えは決まっていて、それは「13px か 15px」です。なぜ 12px でも 14px でもなく、13px と 15px なのか。その理由は、Windows 日本語環境の「事実上の標準」と言えるフォント、ＭＳ Ｐゴシック (MS PGothic) にあります。 Fig 2: ＭＳ Ｐゴシック 12px Fi
AquaKanaを普通に使う。 - blog.coluli.net/
AquaKanaはなぜか「不可視フォント」のため、フォントメニューには表示されません。 ですが、font-familyの指定を使い、htmlで表示させる事ができます。 htmlで表示可能なフォントは、テキストエディットやMailなどのアプリケーションで普通に使うことができます。 利用方法を簡単にまとめました。 //////////////////////////// ①まず、この文字列をコピーし、「テキストエディット」や「Mail」などのリッチテキストフォーマットを扱えるエディタにペーストします。 ①まず、この文字列をコピーし、「テキストエディット」や「Mail」などのリッチテキストフォーマットを扱えるエディタにペーストします。 ②次に、フォントパネルから［よく使う項目］に登録します。 ③以後、いつでも使えるようになります。 ////////////////////////////
安全な@font-faceの書き方(抄訳)
Internet Explorerではかなり昔からあった埋め込みフォント(@font-faceによるフォントの参照)の機能は、Safari 3とFirefox 3.5で有効になったことから急速に話題になることが増えた。ようやく時代がMicrosoftに追いついてきた感じですね。その書き方は大筋では一緒なのだが、細かな仕様の違い、というかIEがEmbedded OpenTypeしかサポートしていないことから工夫が必要になる。その工夫をBulletproof、つまり将来にわたって安全であろうという観点で短くまとめたBulletproof @font-face syntaxというすごく参考になったエントリがあったので訳しておく。語調などは超訳なので、原文とニュアンスが変わっているかもしれない。 安全な@font-faceの書き方 以下は訳注と私見。 条件付コメント 面倒くさいというのはわからなく
10 Wonderful Letterpress Type Tutorials
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. The letterpress type treatment (or as
次期Firefox 3.6が対応する新しいWebフォント形式“WOFF”とは？ - フォントブログ
フォントブログ閉鎖と一部記事の移管について 平素はフォントブログをご覧いただき誠にありがとうございます。 数年前よりブログの更新を中止したまま、諸般の事情で過去の記事は公開をしていましたが、 時代に合わない内容や、すでに古い情報をこのまま残しておくのは良くないと考え、 フォントブログを閉鎖することにいたしました。 これまでお世話になった方々、私に様々な機会を与えてくださった方々、 そして約25年間に当ブログをご覧いただいた方々に心より感謝いたします。 私自身2014年に関東から地元へUターンをし、 書体デザイナーやフォントメーカーの方、文字関係者の方と直接お会いする機会が減ってしまったこと、 また私自身の環境の変化により、以前のように情報収集をする時間の確保が難しくなってしまいました。 フォント好きとして初心に帰り、過去の一部の記事は順次個人サイト (PETITBOYS) のブログのほうへ
Font Awesome Font Free by Dave Gandy » Font Squirrel
SIL Open Font License v1.10 This license can also be found at this permalink: https://www.fontsquirrel.com/license/font-awesome This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL —————————————————————————————- SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 —————————————————
20 beautiful free @font-face fonts - FrancescoMugnai.com
All the fonts of this collection are @font-face compatible and licensed for commercial work. Hand-picked from the amazing fontsquirrel.com Museo-Sans Nevis Rough-Draft Quicksand Miso Walkway Sansation Fontin-Sans Anivers Delicious Diavlo Dubtronic JustOldFashion Komika-Axis NeoRetroDraw Adler Angelina Vollkorn Vtks Animal 2
SIL_Open_Font_License_1.1 - Open Source Group Japan Wiki - Open Source Group Japan - OSDN
本プロジェクトの全コンテンツは、オープンソース・グループ・ジャパンのサイトおよびGitHubサイトへ移動しました。 このWikiは、Open Source Group Japanが運営しています。Open Source Group JapanのWebはこちらへどうぞ。 リソースオープンソースの定義 オープンソースライセンス日本語訳 GPLv3情報 ドキュメントライセンス 日本語訳 最近の更新2020-10-12SIL_Open_Font_License_1.1 FontLicenses 2020-10-10licenses/zlib_libpng_license licenses/Zope_Public_License licenses/X.Net_License サイドバーサイドバーの編集 本プロジェクトの全コンテンツは、オープンソース・グループ・ジャパンのWebサイトおよびGitHub
80 Beautiful Typefaces For Professional Design | Design Showcase
Every now and again designers stumble upon the very same problem: the choice of a unique and beautiful typeface which manages to fulfill three basic tasks. Support the corporate identity, enrich the visual appearance and is compatible with the overall design. However, usually there are simply too many options you can consider, which is why you need time to find the option you are most comfortable
[CSS]さまざまな指定方法によるフォントの見え方を比較 -メイリオ・ＭＳ Ｐゴシック・ヒラギノ角ゴシック | コリス
スタイルシートを使用してフォントサイズの指定を行う場合、いくつかの方法があります。 absolute size キーワードで指定、フォントサイズはUAに依存 ex.)small, medium relative size 親要素に対しての相対指定 ex.)smaller, larger length 正数で指定、使用できる単位は「in, cm, mm, pt, pc, em, ex, px」 ex.)10pt, 1em percentage 親要素に対してのパーセント(%)指定 ex.)100%, 120% この中から、キーワード、em、pt、px、パーセントで指定をし、主要フォントでどのように表示されるかを比較しました。 フォントスタイルは、上から「メイリオ」「ＭＳ Ｐゴシック」「ヒラギノ角ゴシックW3」「Osaka」の順番で、「メイリオ」はWindows Vista、「ＭＳ Ｐゴシック
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ
CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。 まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。 それでは例えば総称ファミリー名（generic-family）である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしま
書体見聞 | 文字の手帖
第七回特別編タイポグラフィの世界 「書体開発のこだわり ~黎ミン開発~」 阿佐ヶ谷美術専門学校視覚デザイン科、「タイポグラフの基礎」編集委員会、高円寺書体研究会の主催による連続セミナー「タイポグラフィの世界」。 詳細を読む 第六回 黎ミン グラデーションファミリー モリサワが2011年に発売した黎ミンはシンプルで親しみやすい表情を持つモダンな明朝体である。その最大の特徴はクセのないニュートラルなデザインとともに34もの異なるウエイトを持つことだ。 詳細を読む 第五回 はるひ学園 モリサワのオリジナル書体「はるひ学園」は、1999年の第6回国際タイプフェイスコンテスト モリサワ賞の金賞受賞作「学園」をベースに開発された（2007年、OpenTypeフォントをリリース）。 詳細を読む
BJKit(BeautifulJapaneseKit)（ツール） - アイデアマンズ株式会社
BJKit(BeautifulJapaneseKit)htmlソースに簡単なJavascriptを記述するだけで、ページ上の文字列がアンチエイリアスの効いた美しい文字に代わります。 BJKit(BeautifulJapaneseKit)でビューティフルな見出しを生成 htmlソースに簡単なJavascriptを記述するだけで、ページ上の文字列がアンチエイリアスの効いた美しい文字に代わります。日本語にも対応しているので、様々な場面で利用することができます。 動的に表示するので、画像を作成する必要がない 新聞記事風、楷書風、POP調など、書体を自由にアレンジ出来る htmlの構造を崩さず、SEOやユーザービリティを犠牲にしない など、ページ作成の効率アップと同時に、表現力も向上させる手法です。 適用例 従来は、当ページの見出し（h1タグ）は下記のように表示されます。 従来の見出しの例 BJKi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Online font converter
https://ttf2eot.sebastiankippe.com/
Student Pack BASIC | フォント製品 | 株式会社モリサワ
M OUTLINE FONTS
各ブラウザのデフォルトフォントサイズ | Bowz::Notebook
