Q&A
普通に考えれば、「最初から等幅のフォントを使う」か「プロポーショナルに表示されるのは受け入れる」という2択になると思うのですが、どうしてそのような矛盾したことを実現したいのでしょうか？
前提・実現したいこと
webページのフォントについてです。
プロポーショナルフォントを等幅で表示させたいです。
プロポーショナルフォント(Quicksand)を使用しているのですが、
数字によって文字幅が異なるため、プルダウン表示させたときに列がずれているように見えて気持ち悪いので、直したいと思った次第です。
試したこと
fontfamily にmonospaceを付与してみました。
指定フォントかmonospaceの一方のみ適用となり、指定フォント＆等幅表示は実現しませんでした。
補足情報（FW/ツールのバージョンなど）
HTML5/CSS/jsで実装できる方法を探しています。
プロポーショナルは詰めて書くからきれいなので、等幅にしたらしたで
違和感が消せるわけではありません
コメントありがとうございます。
既にリリースしているページの改修作業である為、このような矛盾が生じています。
リリース時には「プロポーショナルに表示されるのは受け入れて」このフォントを選択したのですが、「等幅にしてほしい」という要望がありました。
本来であれば改めて等幅のフォントを選定すべきだと思いますが、
フォントの変更によってデザインが変わることを避けたいため、この質問を上げさせていただきました。
「等幅に変える」こと自体、「デザインが変わる」ことだと思うのですが、そちらはいいのでしょうか？
「プルダウン表示させたときに列がずれているように見えて」の「列」とはなんでしょうか。
また、「プルダウン」というのはSelect要素のことでしょうか。
まずは実際の出力サンプルを作成し、仕様決定者に見てもらうことをお勧めします。Excelで列の幅を同一にし、各セルに1文字づつ設定することで、疑似的ですが、等幅表示ができるかと思います。
実際の等幅表示を見たら、違和感から差戻しになる可能性が高いように思えますので。
数字の等幅とプロポーショナルで空白を変えただけの同じ字形を使うことは一般的ですから、よほど極端な字形でない限り違和感は無いと思います。
回答2件
0
font-familyのmonospaceなどはブラウザの指定に任せるという意味なので今回の目的には無意味ですね。
フォントによっては複数種類の数字が入っていてOpenTypeの機能で切り替えられるのですが、残念ながらQuicksandに等幅の字形は入っていないようです。(slashed-zeroは入っているのに…)
https://developer.mozilla.org/ja/docs/Web/CSS/font-variant-numeric
幸いライセンスがSIL Open Font LicenseなのでFontForgeなどのフォント編集ソフトでフォントファイルを書き換えるとよいと思います。幅(とフォント名)を変えるだけならそこまで難しくもないです。
あとは泥臭い方法として、JavaScriptで1文字づつ切り出してinline-blockのspanなどで囲ってwidthを指定するという方法も考えられます。
投稿2020/11/25 13:02
総合スコア3047
0
こんばんは。
数字によって文字幅が異なるため、プルダウン表示させたときに列がずれているように見えて気持ち悪いので、直したい
数字、ということであれば、font-variant-numeric: tabular-nums;をご検討されてはいかがでしょうか。
これらの値は、数字の表記の大きさを制御します。二つの値が利用できます。
...
- tabular-nums は、数字を同じ大きさにする表記を有効にし、表の中に配置しやすくします。 OpenType の tnum の値に対応します。
投稿2020/11/25 13:10
総合スコア36158
あなたの回答
tips
プレビュー
