CSS シークレット ガーデン: ファンシー ampersand_html/css_WEB-ITnose

『CSS Secrets』は、@Lea Verou による最新の本で、CSS に関する小さな秘密を説明しています。これは CSSers にとって読む価値のある本です。一定期間読んだ後、私、@全域と @彦子は、関連する読書感想文を W3cplus で公開し、皆さんと共有します。

ほとんどのコンピューターにあるいくつかの美しい記号。左から右に、Baskerville、Goudy Old Style、Garamond、Palatino (すべて斜体)。

印刷された文献には、目立たないアンパサンドがたくさんあります。適切にデザインされたアンパサンドは非常にエレガントであり、これほどエレガントなシンボルは他にはほとんどありません。この Web サイト全体は、最も見栄えの良いアンパサンドを含むフォントを見つけることに特化しています。ただし、最も見栄えの良いアンパサンドを含むフォントは、他のテキストに使用したいフォントではないことがよくあります。結局のところ、本当に美しくエレガントなタイトルは、常に優れたサンセリフ フォントと美しく洗練されたセリフ記号の組み合わせから生まれます。

Web デザイナーは少し前にこのことに気づきましたが、それを実装するために使用されるテクノロジーは非常に粗雑で扱いにくいものです。通常、これらは、次のように、各アンパサンドを囲むために 45a2772a6b6107b401db3c9b82c049c2 要素で囲まれ、スクリプトまたは手動で追加されます:

HTML <span class="amp">&</span> CSS

次に、次のフォント スタイルを .amp クラスに適用します。下の写真の上と下の2つを比較できます。

ただし、これを実装するテクノロジーは非常に厄介で、HTML タグを簡単に変更できない状況 (CMS を使用する場合など) ではまったく不可能な場合もあります。特定の文字のみをスタイルしたいことを CSS に伝えることはできないでしょうか?

解決策

これを実行し、さまざまなフォントを使用して特定の文字 (または特定の種類の文字) にスタイルを追加できることがわかりましたが、それを完成させる方法は、あなたが考えているほど単純ではない可能性があります。

通常、フォントファミリー宣言で複数のフォント (フォントスタック) を指定します。これにより、最初の選択が使用できない場合、ブラウザーはデザインに適合する他のフォントにダウングレードできます。しかし、多くの作家はこれもそれぞれのキャラクターに基づいていることを忘れています。フォントが使用可能であっても、数文字しか含まれていない場合、そのフォントはそのフォントに含まれている文字に適用され、他の文字についてはブラウザは他のフォントの使用に戻ります。これは、ローカル フォントと @font-face ルールによって埋め込まれたフォントの両方に適用されます。

記号が 1 つしかないフォントがある場合 (どれか当ててみてください!!)、その文字にそれを使用でき、他のすべての文字はフォント スタックや他のフォントの 2 番目、3 番目などになります。スタイルが表示されます。これで、アンパサンドのスタイルを簡単に設定できるようになりました。必要なアンパサンドだけを含む Web フォントを作成し、@font-face 経由で呼び出して、フォント スタックに置きます。最初の位置:

.amp {    font-family: Baskerville, "Goudy Old Style",Garamond, Palatino, serif;    font-style: italic;}

ただし、これはこの方法は非常に柔軟ですが、システムの組み込みフォントの 1 つを使用して & シンボルにスタイルを追加したい場合はどうすればよいでしょうか。フォント ファイルの作成は非常に面倒なだけでなく、追加の HTTP リクエストも追加され、フォントをサブセット化する場合には法的問題が発生する可能性があることは言うまでもありません。ここでローカルフォントを使用する方法はありますか?

@font-face ルールの src 記述子は、ローカル フォント名を指定するための local() 関数も受け入れることをご存知かもしれません。したがって、別の Web フォントの代わりに、ローカル フォント スタックを指定できます:

@font-face {    font-family: Ampersand;    src: url("fonts/ampersand.woff");}h1 {    font-family: Ampersand, Helvetica, sans-serif;}

ただし、ここでアンパサンド フォントを使用しようとすると、セリフ フォントがテキスト全体に適用されることに気づくでしょう。文字はフォントに含まれます。

この小さな後退は、私たちが間違った方向に進んでいることを意味するものではなく、単にこれらのネイティブ フォントの & 文字のみを考慮することを宣言する記述子が欠けていることを意味します。この記述子は存在し、その名前は unicode-range です。

Unicode 範囲記述子は @font-face ルール (用語記述子とも呼ばれ、CSS プロパティではありません) でのみ使用でき、サブセット内の文字の使用を制限します。これは、ローカル フォントとリモート フォントの両方で有効です。ブラウザによっては、これらの記号がページ内で使用されない限り、リモート フォントをダウンロードしないほど賢いものもあります。

残念ながら、unicode-range の構文は、アプリケーションでの使用が非常に簡単であるため、比較的曖昧です。エスケープ文字ではなく、Unicode コード ポイントを使用します。したがって、使用する前に、必要な文字の 16 進数でエンコードされた値を見つける必要があります。利用可能なオンライン リソースが多数あります。または、次の js スニペットをコンソールに直接入力することもできます:

"&".charCodeAt(0).toString(16); // returns 26

注意： String#charCodeAt() 返回不正确的结果，超过了BMP（基本多文种平面）的范围。但是99.9%的字符你都需要在里边查找。如果你得到的结果是在D800-DFFFF的范围内，那么你就有一个“非常大”的字符，这时候你最好使用一个适当的在线工具来找出它的unicode代码点。ES6方法 String#codePointAt() 可以解决这个问题。

现在你拿到对应的十六进制编码值，你可以在它们前面加上 U+ ，这样你就已经指定了一个字符了！这是我们的 & 用例的声明：

unicode-range: U+26;

如果你想要指定一个范围的字符，你还是只需要一个 U+ 即可，像： U+400-4FF 。事实上，对于这种范围，你可以使用通配符把它指定为 U+4?? 。多个字符或多个范围也是可以的，用逗号分隔，如 U+26, U+4, U+2665-2670 。在这里，我们只需要一个字符就OK。所以我们的代码如下：

@font-face {    font-family: Ampersand;    src: local('Baskerville'),         local('Goudy Old Style'),         local('Palatino'),         local('Book Antiqua');         unicode-range: U+26;}h1 {    font-family: Ampersand, Helvetica, sans-serif;}

如果你尝试了，你可以看到结果。

事实上，就是给我们的 & 符号应用了一个不同的字体！但是，这个效果并不是我们想要的那个。图5.19中的 & 符号是从Baskerville字体的斜体变形得来的，一般情况下，衬线字体都是斜体的 & 字符比较好看。我们不能直接给 & 添加样式，那怎么样才能让它显示成斜体呢？

我们的第一个想法可能是在 @font-face 规则中使用 font-style 描述符。但是，这不会有我们想要的效果。它只是告诉浏览器说我们要让这些字体显示成斜体。因此，它会使得我们的Ampersand字体被直接忽略，除非整个标题都是斜体的（在这种情况下，我们确实可以得到非常漂亮的斜体 & 符号）。

可惜，唯一的解决方案非常麻烦：不是使用 font family ，我们需要使用我们想要的那个字体的 style/weight 的 PostScript 名称。所以，为了得到我们使用的字体的斜体版本，我们最后的代码如下：

@font-face {    font-family: Ampersand;    src: local('Baskerville-Italic'),         local('GoudyOldStyleT-Italic'),         local('Palatino-Italic'),         local('BookAntiqua-Italic');         unicode-range: U+26;}h1 {    font-family: Ampersand, Helvetica, sans-serif;}

备注：在Mac OS X上查找字体的PostScript，在FontBook应用中选中它并按 ⌘I 。

最后我们得到了我们想要的 & 符号，如图:

可惜，如果我们想要再为它们添加自定义样式（如，增大字体尺寸，减少透明度，或其它的自定义操作），我们需要去HTML元素中修改。但是，如果我们只是想要一个不同的字体和某个字体不同style/weight，这个技巧非常好用。基本思路是相同的，你可以使用不同的字体、符号、标点给数字添加样式，它有无限的可能性！