4

メインの見出しが固定幅フォント (私のではなくデザイナーの選択) で表示される Web サイトを作成しています。しかし、コンマを含む見出しの場合、これは非常に奇妙に見えることがあります。コンマの後に膨大な量のスペースが残っています。

スクリーンショット表示の問題

ですから、このスペースを減らして、物事をもう少し自然に見せる方法を考えていました。

簡単な解決策は、私の PHP バックエンドがコンマとそれに続くスペースのすべての出現箇所を、コンマとそれに続く細いスペースに置き換えることです(この解決策は機能します)。しかし、私は少し気が進まない - 問題を間違った場所で修正しているようだ. たとえば、後でフォントが固定幅ではないものに変更されたが、新しい開発者が挿入された細いスペースを削除するためにバックエンドを探索する方法を知らない場合はどうなるでしょうか?

では、これを行う「適切な」方法は何ですか?

4

3 に答える 3

6

「適切な」方法は、奇妙に見えないフォントを使用することです。コンマの後のスペースが細くなることを除いて、固定幅のフォントをデザインすることは完全に可能です。どうやら、デザイナーはそれを使用 (または作成) しませんでした。

これが表示されないフォントを使用する以外に、CSS には「このスペースをフォントの残りの部分よりも小さく表示する」と言う方法がないため (少なくとも、マークアップでそのスペースを分離することなく)、行き詰まります。つまり、フォントを変更すると、他の何かも変更する必要があります。他の何かが PHP であろうと JavaScript であろうと関係ありません。船はその時点で航海しています。:-)

また、デザイナーが何らかの理由で等幅フォントを使用しているように見えることにも注意してください。コンマの後のスペースを固定幅いっぱいにしないように変更すると、その理由が何であれ、干渉する可能性があります。

私はそれを完全なスペースで残します。それは設計者の問題であって、あなたの問題ではありません。

于 2015-12-19T09:42:54.130 に答える
1

空白を個別にスタイリングすることを妨げるものは何もありません。

h1 {
  font-family: monospace;
}
.short-space {
  letter-spacing: -.33em;
}
<h1>PHILOSOPHY,<span class="short-space"> </span>POLITICS AND ECONOMICS</h1>

スタイル情報なしでタイトル全体を別のテキストにコピー アンド ペーストすると、カンマの後に通常の空白が残ります。

于 2015-12-19T11:11:35.807 に答える
1

これを CSS にほぼ保持する方法でこれを処理したい場合は、コメントでWill が良いアイデアを思いつきましたが、回答として投稿していません: PHP または JavaScript を使用して、カンマの後のスペースを置き換えます。ただし、次のように置き換えます。

<span class="space-after-comma"> </span>

次に、CSS はそれらのスペースをどうするかを制御できます — そのままにしておくか、スペースを狭くするかなどです。そうすれば、フォントの変更と.space-after-commaスペースの処理は、どちらも PHP や JavaScript レイヤーではなく、CSS レイヤーでの変更になります。

(Will: コメントを回答として投稿する場合は、このコミュニティ wiki の回答を削除できるように、@ 私に連絡してください。)

于 2015-12-19T10:09:43.640 に答える