HTMLで文字自体は大きくして、線は細くしたい

前提・実現したいこと

webアプリ（カウントダウンタイマー）をhtml,css(bootstrap,bootstrapVue),js（vue.js）を用いて作成中です。
タイマーのカウント数字のフォントサイズと太さについて質問です。

発生している問題・エラーメッセージ

解決したいことは、フォントサイズを大きくすることで文字が太く見えるようになった現象を解決したいと考えております。

下記のコードの通り、カウント数字の設定をしています。

該当のソースコード

css
1    font-size: 40vmin;
2    font-weight: 100;
3　　font-family: 'arial narrow','Amatic SC', cursive; 
4

試したこと

font-weightの値を100〜900の中で変化させてみました。
デフォルト以外のフォントを設定してみた。

m.ts10806

2020/01/27 00:23

>文字が太く見えるようになった大きいのでそういう気がするだけではないでしょうか。ちょっと目的が分かりません。フォントの特徴もあるでしょうし。

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

回答1件

ベストアンサー

文字サイズを大きくすると、文字が太く見えてしまうのは恐らく仕様のため仕方がないことだと思います。
また、font-weightも今の文字の太さよりも細くすることできないはずです（多分）。
ですから、もともと文字の太さが細いフォントを選んでみてはいかがでしょうか。
例えば、Googleフォントがおすすめです。Googleフォントで可能な限り細いフォントを見つけていただいて上記のように、font-familyで指定すれば解決するのではないでしょうか。
vue.jsでも、問題なく使えるはずですので、
「vue.js グーグルフォント」で調べていただいて、使ってみてください。
的はずれな回答だったら、お役に立てず申し訳ありません。

投稿2020/01/28 07:42