CSS「-webkit-line-clamp」を使用して複数行にも対応した三点リーダー(…)を実装する
ブログなどの記事を一覧ページにも表示する場合、一行だと短すぎるけど全部出すのは長すぎる。…
コンテンツのテキスト部分より目立つようにしたい場合に、画像を作成して表現することの多かった見出しやキャッチコピー。
「Google Web Font」を使うと、簡単に豊かなフォント表現が可能。
日本語フォントも増えてきたので使い方をメモ。
「Google Web Font」のサイト内に用意されているCSSファイルにリンク方法でも実装は可能ですが、追加の度に全てのHTMLファイルを変更するのは大変なので、インポート(@import)を使った方法で実装。
サイト内の検索フォームからイメージに近い文字を検索。
希望フォントの詳細ページで「SELECT THIS FONT」をクリック。
下部に表示された「Family Selected」を開き「EMBED」を「@IMPORT」に切り替えて「ソースコード」を確認。
文字を変更したいクラスに、前の工程で確認した「ソースコード」を記載。
※下記の参考例は「 Noto Sans JP 」というフォントを使用。
@import url('https://fonts.googleapis.com/cssfamily=Noto+Sans+JP&display=swap');
.jpn-font{
font-family: 'Noto Sans JP'; }