前提・実現したいこと

ワードプレスにてホームページを作成しています。
和欧混植的な組み方をしたいのですが、同じ文字サイズだと、英数字が少し小さくなってしまいます。
指定しているスタイルから英数字のみ
・サイズ → 102%
・ウエイト → 1ウエイト上げる（出来れば...）
ということをサイト全体を通して行いたいのですが、可能でしょうか？
また、仮に出来たとしてサイトの速度に影響はありますでしょうか？

例えば、以下のような記述の場合、

<div>
  <h1>タイトルABCが入ります</h1>
  <p>リードABCが123入ります</p>
</div>


h1 {
	font-size: 20px;
	font-weight: 600;
}

p {
	font-size: 14px;
	font-weight: 400;
}

「ABC」と「123」のみ↓のように出力したいということです。

h1 {
	font-size: 20.4px;
	font-weight: 700;
}

p {
	font-size: 14.28px;
	font-weight: 500;
}

JavaScript若しくはPHPを使えばいけるのかなぁと思いググりましたが、ヒットせず..
どなたかご教授いただけると助かります。

追記

使用フォントはgoogle fontのMontserratとNoto Sans JPです。
以下のようにbodyで指定して、1バイト＝Montserrat、2バイト＝Noto Sans JPが読まれるようにしています。

body {
	font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

補足

サイト全体のテキスト全てに適応したいため、spanなどで個別に指定するのではなく、自動で英数字を判別して「各要素の指定サイズの102％」といった具合に動的出力したいと思っています。

m.ts10806

2021/07/16 02:16 編集

何のフォントでしょうか。むしろフォントの影響に思いますが。

退会済みユーザー

2021/07/16 02:29

この質問内容って、シンプルにcssとかスタイルシートの話じゃないかな。質問タグにCSSとか付けたほうが情報が集まりやすいのでは？

行動規範の内容に同意します

回答3件

@font-face - CSS: カスケーディングスタイルシート | MDN

font-familyで使用するフォントを指定しつつ、
unicode-rangeで適用する文字範囲を指定しつつ、
size-adjustで文字サイズを微修正できるけどwebブラウザを選ぶのであまり良くない。

size-adjustを使わないとしても、適用するフォントを部分的に確実に変更できるのは試す価値がありそう。

応用例：CSSで数字だけフォントを変えたい - Qiita

投稿2021/07/16 02:41

編集2021/07/16 02:43

退会済みユーザー

総合スコア0

has_k

2021/07/16 02:56

ありがとうございます！試してみようと思いますが、各要素異なる文字サイズを一括して「既に指定されているサイズから○倍」みたいな指定はできるのでしょうか？

退会済みユーザー

2021/07/16 03:00

記事読んでから質問してね

行動規範の内容に同意します

ベストアンサー

ご質問のご希望から外れますが、CSSのunicode-rangeを使うと、アルファベットだけフォントを変えるというようなことが可能です。
unicode-range - CSS: カスケーディングスタイルシート | MDN

質問の追記に合わせて追記

既にフォントを使い分けているご様子なので、JavaScriptで処理する方法を提示します。
サンプルを置いておきます。

https://jsfiddle.net/Lhankor_Mhy/L061v9yc/

js
1const nodeIterator = document.createNodeIterator(
2    document.getElementById('target'),
3    NodeFilter.SHOW_TEXT,
4    {
5      acceptNode(node) {
6        return !node.parentElement.classList.contains('alphabet');
7      }
8    }
9);
10while (currentNode = nodeIterator.nextNode()) {
11    const template = document.createElement( 'template' )
12    template.innerHTML = currentNode.nodeValue.replace(/(\w+)/g,'<span class="alphabet">$1</span>');
13    currentNode.parentElement.insertBefore(template.content,currentNode);
14    currentNode.parentElement.removeChild(currentNode)
15}

なお、DOMの構造が変わるので、思わぬレイアウトになる場合があります。

たとえば、https://jsfiddle.net/Lhankor_Mhy/L061v9yc/3/

投稿2021/07/16 02:33

編集2021/07/16 06:19

Lhankor_Mhy

総合スコア36960

has_k

2021/07/16 06:37

まさに理想どおりの出力になりました！！実装させていただきましたが、崩れも確認されません！！サンプルまで付けていただき...本当にありがとうございます > < ご回答いただいた皆様、素人まるだしの質問失礼致しました。この場を借りてお礼申し上げます。

Lhankor_Mhy

2021/07/16 08:11

お役に立てたようで何よりです。

行動規範の内容に同意します

普通に英数字のみspanで囲んで当てたいスタイルを書いたclassを当てればいいと思います。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .hoge {
      font-size:50px;
      color:red;
    }
  </style>
</head>

<body>
  <div>
    <h1>タイトル<span class="hoge">ABC</span>が入ります</h1>
    <p>リード<span class="hoge">ABC</span>が<span class="hoge">123</span>入ります</p>
  </div>
</body>

</html>

投稿2021/07/16 02:28