コピーライトはフォント指定で書体を変えれるのか？

Question

###分からない事
タイトル通りなのですが特殊文字のコピーライト「©」をcssフォント指定で書体を変えることはできますか？

HTMLに入力しているのは→「©」
ネット上で表示されるのは→「©」

書体を変えれるのか、変えれないのか
また書体を変えることができるのであればどのよういに書き込めば変更できるのか
お分かりになられる方見えましたらお力お貸しください。宜しくお願い致します。

Answer 1

変えられますがあまりいじらないほうがよいでしょう

<div style="font-size:10em">
<span style="font-family: sans-serif;">&copy;</span>
<span style="font-family: Arial">&copy;</span>
<span style="font-family: 'MS PGothic'">&copy;</span>
<span style="font-family: 'MS PMincho'">&copy;</span>
</div>

Comments

[satoshickkk]

回答ありがとうございます、いじらない方がいいのはなぜでしょうか？

[liveasnotes]

HTMLそのものをいじると，後々の修正が面倒になるからではないでしょうか．

スタイルを変更したいと思ったとき，過去に作成したファイルをすべて開いて，いちいちスタイルを書き直すのは面倒なので，外部CSSで一括して指定した方が楽だと思います

[yambejp]

考え方としてはあまりにデザイン的に浮いてしまうならともかく
コピーライト表記自体にデザイン性をもとめることは不毛だからです、

それとcopyrightは慣習としてsmallタグに入れることになります
未設定で提案されるsans-serifが一番視認性が高いので
なにも指定しないのが一番です。

[m.ts10806]

既に回答が出ていて新たに回答するまでもないのでぶら下がらせていただきます。

＞いじらない方がいいのはなぜでしょうか？
あまりコピーライト表示自体に装飾をしても意味がないからではないでしょうか。
色くらいならあるでしょうけど、文字や記号というよりアイコンみたいなものという認識です。

[liveasnotes]

なるほど，確かに(c)だけにスタイルを指定するのは実際的ではないですね

あと個人的に「©」は見づらいので，「（C）」を使うことが多いです．
画面が小さくても確実に読めますし，入力も楽なので

[ViiiiiN]

ちなみにteratailはどうしているかというと、©を使っていて、fontsizeを他のテキストより若干小さくしてますね～。(pタグに入ってるのが気になりますが)

[liveasnotes]

ほんとだ，全然気にしてませんでしたw
（これで，閲覧者が著作権記号のスタイルにそこまで意識を払っていないことがry(

[m.ts10806]

ブラウザの特殊記号の対応の関係でliveAsNotesさんの仰るように（C）としたり画像にしたり、昔はありましたねー。

[yambejp]

そもそもコピーライトは書く必要のない記述ですから微妙ですね
(C)は代替記述なので選択肢が他にないならそれでもいいですが
HTMLには©が用意されているのでせっかくだからそれを
利用したほうが楽じゃないかなと

あと、®や™などの表記を考えてもデフォルトが一番
いいように感じます

[m.ts10806]

なるほど勉強になります。
閲覧者へのアピールのためにそこにあるのが大事であって確実に読めることが大事ってわけでもないですもんね・・・

[liveasnotes]

記号1つでここまで掘れるとは...奥が深い...！

[satoshickkk]

皆様、ためになるご意見ありがとうございます。
このことを頭に入れつつ臨機応変にfont-familyを使用していけたらと思っております。

Answer 2

対象の文字をHTMLタグで囲み，クラスもしくはidをつけてスタイルを指定すればよいです．

cssには，正規表現などで文字そのものを指定してスタイルを適用する方法はありません．
そのため，スタイルを適用したい対象をタグで囲んだうえで，指定する必要があります．

<!-- 空のタグにbefore擬似要素で著作権記号を付ける例 -->

<style>
.copyright::before{
    display: inline; /*displayプロパティを指定しないと，contentの内容が表示されない*/
    content: "©";
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 50px;
    /*好きなスタイルを書き込む*/
}
</style>

<i class=copyright></i>

Comments

[satoshickkk]

ご回答ありがとうございます。
空のタグで表示するやり方もあるのですね…！
思いつきませんでした、ありがとうございました。

Answer 3

普通にCSSでできますよ。
サンプル

.serif{
  font-family:serif;
}
.monospace{
  font-family:monospace;
}

Comments

[satoshickkk]

回答ありがとうございます。
WEBフォントなど特殊なフォントも指定できますでしょうか？