質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

Q&A

解決済

3回答

9680閲覧

web font (google fonts)が勝手に斜体になる...

manaty

総合スコア7

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

0グッド

0クリップ

投稿2016/11/17 08:17

編集2016/11/17 09:36

ATOMでホームページを作っています。素人です。

web font(google fontsにもある) Josefin sans を使いたく以下のように組んだのですが、なぜか一部の太さ(weight)だけ斜体になってしまいます。

<!DOCTYPE HTML> <html> <head> <title>test</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style type="text/css"> .test{ font-family: 'Josefin Sans', sans-serif; } .test h1{ font-weight: 700; } </style> </head> <body> <div class="test"> <p>TEST</p> <p>JosefinSansがなぜか斜体になる</p> <br /> <h1>weightによってはならない</h1> <p>WHY why why</p> <h1>WHY why why</h1> </div> </body> </html> ###試したこと ヘッダーに <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700" rel="stylesheet"> を書いても書かなくても同じでした。 特にitalic等font-styleは、いじってないのですが、、、 お詳しい方教えて下さい。 追記 ブラウザはFirefox、Chromeで確認しましたが、どちらも<p>の英語部分が斜体になります。<h1>はweight700にしているので斜体にはなりません。。。 ![イメージ説明](219d3a3b2865eceb006ddfe498353a99.png) すいません、、 開発者ツールを見てもわかりません。。。 追記 そもそも、 <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i" rel="stylesheet"> を書かなくても反映するってことありますか? 書かずとも斜体にはなりますが、ちゃんとjosefin sansになるのが不思議です。 どこかlocalからひっぱってきてしまっているのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kunai

2016/11/17 08:21

提示されたHTMLそのままで、斜体になりますか?コピってHTMLとして保存し、ブラウザ(Chrome)で確認しましたが、斜体にはなりませんでした。
manaty

2016/11/17 08:33

kunaiさま 早速のご回答ありがとうございます。東方こちらで質問はじめてで追記に重複してしまいますが、ブラウザはFirefox、Chromeで確認しましたが、どちらも<p>の英語部分が斜体になります。<h1>はweight700にしているので斜体にはなりません。。。 わたしのPCがおかしいのでしょうか...
gin

2016/11/17 09:11

h1のfont-weightを700から400に変えると斜めになるんですか?
manaty

2016/11/17 09:15

ginさまありがとうございます。斜めになります。。。
kei344

2016/11/17 09:24

コードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
manaty

2016/11/17 09:32

すいません、、どことどこを囲めば良いかわかりません。。無知ですいません。
gin

2016/11/17 09:34

</html>の下にも「```」をつけてください。
gin

2016/11/17 10:03 編集

↑これ「どことどこを囲めば良いかわかりません」への回答ですよ。コード(この場合は<html>~</html>)をバッククォート3個で囲みます。<html>の上にはすでに3個あるので、</html>の下に同じように追加します。ちなみに最初の3個にhtmlと付けて「```html」とするとhtmlコードと分かるようになります。
guest

回答3

0

ベストアンサー

ChromeとFirefoxがあるのであれば、開発者ツールにてダレがその斜体CSSを設定しているか確認してください。
ページを開いた状態で、F12キーを押すと開発者ツールが出てきます。
Chromeの場合、開発者ツールの左上にカーソルが□を指しているようなアイコンが出ますが、それをクリックしてから、斜体になっているテキストをクリックしてください。
開発者ツールの右側に、その要素に与えられたCSS定義が表示されます。

投稿2016/11/17 08:40

kunai

総合スコア5405

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kunai

2016/11/17 09:18

もしかしてローカルにインストールした「Josefin sans」があり、それがイタリックなのではないでしょうか。 Windowsであれば、C:\windows\fonts 以下にインストール済みのフォントがありますので、そこにJosefin Sansがないか見てみてください。 もしあった場合は、問題なければ一度アンインストールすると良いのでは。
kunai

2016/11/17 09:20

途中送信してしまいました。 私のPCにはJosefin Sansがインストールされていませんが、こちらでは<link>タグでフォントを指定した場合のみJosefin Sansが有効になりました。 linkタグを書かなかった場合、システムデフォルトのフォントで表示されます。
manaty

2016/11/17 10:13

kunaiさま やはりローカルにありました。 HD/ユーザ/<ユーザ名>/ライブラリ/Fonts でした。 度々ご丁寧に教えて頂き、大変助かりました。 またわからないことがありましたら、、是非ともよろしくお願い致します。 ありがとうございました。
guest

0

こちらで試してみた結果

イメージ説明

ご覧のように斜体にはなりません。

html

1<!DOCTYPE HTML> 2<html> 3 <head> 4 <title>test</title> 5 <meta charset="utf-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1" /> 7 <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700" rel="stylesheet"> 8 9 <style type="text/css"> 10 .test{ 11 font-family: 'Josefin Sans', sans-serif; 12 } 13 .test h1{ 14 font-weight: 700; 15 } 16 </style> 17 18 </head> 19 20 <body> 21 <div class="test"> 22 <p>TEST</p> 23 <p>JosefinSansがなぜか斜体になる</p> 24 <br /> 25 <h1>weightによってはならない</h1> 26 <p>WHY why why</p> 27 <h1>WHY why why</h1> 28 </div> 29 </body> 30</html>

投稿2016/11/17 08:23

編集2016/11/17 08:24
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

manaty

2016/11/17 09:02

ご回答ありがとうございます。 わたしもchromeでやってみましたが、ダメでした。。。htmlとは別に問題があるって事でしょうか。
退会済みユーザー

退会済みユーザー

2016/11/17 10:07 編集

斜体にならないのが正解で書かれた通りの動作しているということです。 > 「わたしもchromeでやってみましたが、ダメでした。。。」 わたし「も」の「も」の意味がわかりません。
manaty

2016/11/17 10:18

大変申しわけございません。私も Kosuke_Shibuya様 同様、chromeで試したのですが、 私の場合は斜体になってしまった。とお伝えしたかったのですが、言葉足りずで失礼いたしました。 この度はご丁寧にありがとうございました。
guest

0

原因がわかったと思って答えようと思ったら解決してましたが、悔しいので貼っておきます。イメージ説明
これが自分のと違う。ローカルって書いてある。
javascript - 要素に適用されている実際のフォントを知るには? - スタック・オーバーフロー

投稿2016/11/17 10:26

toutou

総合スコア2050

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

manaty

2016/11/18 06:24

toutouさま ご回答ありがとうございます。なるほど、勉強になります。 今後この方法でなるべく自力で解決したいと思います。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問