4

私は雑誌のグラフィック デザイナーで、ウェブサイトを印刷物に近づけたいと考えています。本誌では、大文字が2文字以上続く文字列にはスモールキャップスを使用しています。

OpenType フォントで真のスモール キャップを使用できることはわかっています。また、CSSで1行目または1文字目をターゲットにできることも知っています

だから私の質問は：

テキスト内の大文字の文字列をターゲット/検出し、font-variantプロパティを自動的に適用することは可能でしょうか (スタイルやクラスを手動で適用する必要はありません)。

これが例です

ここに画像の説明を入力

4

1 に答える 1

1

このようなことを意味する場合は、確かに ！ただし、正規表現は、単語のシーケンスではなく単語のみに一致するため、改善される可能性がありますが、正規表現はまだエイリアンスピークなので、これが私ができる最善のことです:

[].forEach.call(document.querySelectorAll(".smallcapsify"), function(content) {
  var parsed = content.innerHTML.replace(/[A-Z]{2,}/g, '<span class="small-caps">$&</span>');
  content.innerHTML = parsed;
});
@import url(http://fonts.googleapis.com/css?family=Merriweather);
 span.small-caps {
  font-variant: small-caps;
  text-transform: lowercase;
}
/* Styles to make it look nicer */

body {
  font-size: 2em;
  font-family: Merriweather, serif;
  text-rendering: optimizeLegibility;
  
  /* Enable common and discretionary ligatures, according to http://blog.fontdeck.com/post/15777165734/opentype-1 and http://caniuse.com/#search=font-feature-settings */
  -webkit-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
}
<div class="smallcapsify">
  This is SOME TEXT. Here is some MORE text.
</div>

于 2015-04-30T15:28:53.717 に答える