設定：Font関連
初期設定
font-family
固有のFontがあれば記述
一部明朝体になっていないかsafariで確認
文字詰:palt
明朝など、OTF以外では使えないメイリオ・Noto Sans・MS ゴシック・MS 明朝など、OTF以外では使えない
念の為プレフィックスも
body {
font-family: “MS Pゴシック”, sans-serif;
font-size: 16px;
font-feature-settings: “palt”;
-webkit-font-feature-settings: “palt”;
-moz-font-feature-settings: “palt”;
}
font-size
条件:
320px < =width < 768px
基準window size 375px
body : font-size:16px (100%)
font-size : 10px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs10 {
font-size: clamp(8.6px, 2.66667vw,12px);}
font-size : 11px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs11 {
font-size: clamp(9.46px, 2.933337vw, 13.2px)}
font-size : 12px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs12 {
font-size: clamp(10.32px, 3.200004vw, 14.4px)}
font-size : 13px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs13 {
font-size: clamp(11.18px, 3.466671vw, 15.6px)}
font-size : 14px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs14 {
font-size: clamp(12.04px, 3.733338vw, 16.8px)}
font-size : 15px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs15 {
font-size: clamp(12.9px, 4.000005vw, 18px)}
font-size : 16px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs16 {
font-size: clamp(13.76px, 4.266672vw, 19.2px)}
font-size : 17px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs17 {
font-size: clamp(14.62px, 4.533339vw, 20.4px)}
font-size : 18px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs18 {
font-size: clamp(15.48px, 4.800006vw, 21.6px)}
font-size : 19px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs19 {
font-size: clamp(16.34px, 5.066673vw, 22.8px)}
font-size : 20px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs20 {
font-size: clamp(17.2px, 5.33334vw, 24px)}
font-size : 21px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs21 {
font-size: clamp(18.06px, 5.600007vw, 25.2px)}
font-size : 22px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs22 {
font-size: clamp(18.92px, 5.866674vw, 26.4px)}
font-size : 23px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs23 {
font-size:clamp(19.78px, 6.133341vw, 27.6px)}
font-size : 24px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs24 {
font-size:clamp(20.64px, 6.400008vw, 28.8px)}
font-size : 25px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs25 {
font-size:clamp(21.5px, 6.666675vw, 30px)}
font-size : 26px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs26 {
font-size:clamp(22.36px, 6.933342vw, 31.2px)}
font-size : 27px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs27 {
font-size:clamp(23.22px, 7.200009vw, 32.4px)}
font-size : 28px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs28 {
font-size:clamp(24.08px, 7.466676vw, 33.6px)}
font-size : 29px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs29 {
font-size:clamp(24.94px, 7.733343vw, 34.8px)}
font-size : 30px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs30 {
font-size:clamp(25.8px, 8.00001vw, 36px)}
font-size : 31px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs31 {
font-size:clamp(26.66px, 8.266677vw, 37.2px)
font-size : 32px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs32 {
font-size:clamp(27.52px, 8.533344vw, 38.4px)
font-size : 33px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs33 {
font-size:clamp(28.38px, 8.800011vw, 39.6px)
font-size : 34px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs34 {
font-size:clamp(29.24px, 9.066678vw, 40.8px)
font-size : 35px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs35 {
font-size:clamp(30.1px, 9.333345vw, 42px)
font-size : 36px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs36 {
font-size:clamp(30.96px, 9.600012vw, 43.2px)
font-size : 37px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs37 {
font-size:clamp(31.82px, 9.866679vw, 44.4px)
font-size : 38px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs38 {
font-size:clamp(32.68px, 10.133346vw, 45.6px)
font-size : 39px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs39 {
font-size:clamp(33.54px, 10.400013vw, 46.8px)
font-size : 40px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs40 {
font-size:clamp(34.4px, 10.66668vw, 48px)
font-size : 41px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs41 {
font-size:clamp(35.26px, 10.933347vw, 49.2px)
font-size : 42px
あのイーハトーヴォのすきとおった風、夏でもABcd0123
.fs42 {
font-size:clamp(36.12px, 11.200014vw, 50.4px)
装飾系
box-decoration-break: clone
行ごとに色をつける
※2025.03時点で IE11は非対応
念の為webkitを追加
行が増えても自動で対応
あのイーハトーヴォのすきとおった風、夏でもABcd0123あのイーハトーヴォのすきとおった風、夏でもABcd0123
.sam11 {
display: inline;
padding: 0.25em;
background: #333;
color: #fff;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
複数行に3点リーダ省略表示
行ごとに色をつける
1行 : -webkit-line-clamp: 1;
3行 : -webkit-line-clamp: 3;
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、
.sam12 p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden
&.p3 {
-webkit-line-clamp: 3;
}
縦書き文字
safariで効かない場合あり
table不使用 > div代用で表示できた
.sam13 {
display: flex;
align-items: center;
& div {
width: fit-content;
writing-mode: vertical-rl;
text-orientation: upright;
}
マーカー
sam16 : linear-gradient
MAC / WINで表示が違う場合あり
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、
sam15 : text-underline-offset
値をマイナスにすると英語が下切れる
– text-decoration-skip-ink: none;で対応
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波
.sam16 {
background: linear-gradient(transparent 60%, #ddd 40%);
display: inline;
padding: 0 2px 3px;
}
.sam15 {
text-decoration-line: underline;
text-decoration-thickness: 0.4em;
text-decoration-color: #ddd;
text-underline-offset: -3px;
text-decoration-skip-ink: none;
}
グラデーションテキスト
background-clip: text を使って実装
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、
.sam17 {
background: linear-gradient(45deg, #ff2176 0%, #1ed45b 40%, #005bac 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-size: 30px;
}
テキストにマスク
テキスト内に背景画像を入れ込む
background-clip: text;
.sam18 {
font-size: 3em;
font-weight: bold;
background-image: url(マスクされる画像);
background-clip: text;
color: transparent;
background-size: contain;
}
svg テキストで縁取り
テキスト内に背景画像を入れ込む
background-clip: text;
<svg>
<text x=”10″ y=”40″ textLength=”340″ rotate=”5″ class=”sam23″>あのイーハトーヴォ</text>
</svg>
.sam23 {
font-size: 30px;
stroke-width: 10;
stroke: rgb(0, 0, 0);
fill: rgb(255, 255, 255);
paint-order: stroke;
stroke-linejoin: round;
}
表示系
長いURLや英数字で改行
word-wrap: break-word;
でほぼ対応できる。効かない場合は
- 収まらない場合折り返し
overflow-wrap: anywhere; - 単語の分割はデフォルト
line-break: strict;
- 禁則処理を適用
line-break: strict;
.sam14 {
container-type: inline-size;
resize: horizontal;
overflow: auto;
word-wrap: break-word;
}
wbrで改行
<wbr> : 改行可能位置
テキスト内でブラウザーが任意で改行してよい位置で実行
必要のない場合は改行しない
<div>https://www.nasgaiurl.com/<wbr>Lorem ipsum <wbr>dolor sit amet,<wbr> consectetur adipisicing elit,<wbr> sed do eiusmod<wbr> tempor incididunt<wbr> ut labore et dolore<wbr> magna aliqua/</div>
“設定：Font関連” に対して2件のコメントがあります。
コメントは受け付けていません。