androidでコピーライトの記号 © のスタイルが変更されない問題

結論

androidでコピーライトの記号文字のスタイルが変更されていなかった。
androidの日本語で適用されるシステムフォントではスタイルを変更できないので英語で適用されるシステムフォントを当てることで解決した。

経緯

android標準の表示

以下のようなhtmlを記載したところ、androidでは意図したスタイルになりませんでした。

<!doctype html>
<html lang="ja">
<head>
    <style type="text/css">
        h1 {
            color: red;
            font-size: 60px;
        }
    </style>
</head>
<body>
    <h1>© font default</h1>
</body>
</html>

1.JPG

langをenに変更した際の表示

同様の現象に直面した人の解決策を見た所、langをenにすることで解決したとのことです。
それに習って変更を行ったところ記号のスタイルは変更されるようになりましたが、最新のchrome for androidでは自動翻訳のポップアップが表示されるようになってしまいました。

<!doctype html>
- <html lang="ja">
+ <html lang="en">
<head>

2.JPG

font-familyを適用させた際の表示

翻訳のポップアップが表示されるのは困るので、langがenの際に適用されるフォントを調べたところandroidのフォントについて調べてくださった方曰く、英語はRobotoというフォントが使われているようです。
以下のようにfont-familyを適用させて確認し、意図したように表示できることを確認できました。

<!doctype html>
<html lang="ja">
<head>
    <style type="text/css">
        h1 {
            color: red;
            font-size: 60px;
        }
        .roboto-font {
            font-family: Roboto, Arial, Helvetica, Tahoma, Verdana;
        }
    </style>
</head>
<body>
    <h1>© font default</h1>
    <h1 class="roboto-font">© font roboto</h1>
</body>
</html>

3.JPG

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.