回答編集履歴
3
原因判明
answer
CHANGED
|
@@ -73,4 +73,28 @@
|
|
|
73
73
|
|
|
74
74
|
追加されたキャプチャを見る限り、環境依存とかデバイスごとの違いとかの以前に、
|
|
75
75
|
明らかにSafariだけ指定のWebフォントが読み込まれていない（適用できていない）です。
|
|
76
|
-
掲載されている情報以外に、絶対何か他の原因があるはずです。
|
|
76
|
+
掲載されている情報以外に、絶対何か他の原因があるはずです。
|
|
77
|
+
|
|
78
|
+
---ここから更に追加---
|
|
79
|
+
|
|
80
|
+
Safariだけ適用されない原因（？） 分かりました。
|
|
81
|
+
|
|
82
|
+
`@import url('https://fonts.googleapis.com/css?family=Josefin+Slab:400i|Noto+Sans+JP|Noto+Serif+JP');`
|
|
83
|
+
|
|
84
|
+
読み込んでいる欧文フォントが「イタリック体」 なので、
|
|
85
|
+
Safariでは `font-style: italic;` の1行が必要だったようです。
|
|
86
|
+
|
|
87
|
+
```CSS
|
|
88
|
+
p.c-en{
|
|
89
|
+
position: absolute;
|
|
90
|
+
font-size:50px;
|
|
91
|
+
font-family: 'Josefin Slab', serif;
|
|
92
|
+
top:10px;
|
|
93
|
+
text-shadow:3px 3px 4px white;
|
|
94
|
+
font-style: italic; /*追加*/
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
前回私の方でテストしたのが普通にSafariでも読み込めたのは、
|
|
98
|
+
読み込んでいるWebフォントがイタリック体ではないものだったからのようです。
|
|
99
|
+
イタリック体の書体を指定した際に、font-styleの指定を併記しなければ適用されないというのが
|
|
100
|
+
Safari独自の仕様ということなんでしょうね。
|
2
情報追加
answer
CHANGED
|
@@ -11,4 +11,66 @@
|
|
|
11
11
|
3. 2で正しく表示されるのであれば読み込み方法は正しいので、他の部分に問題があることはほぼ確定。
|
|
12
12
|
あとは地道に少しずつ必要なCSSを足していってどこで表示されなくなるか確認し、問題のコードを調査する
|
|
13
13
|
|
|
14
|
-
といった感じで頑張って調べてみるしかないかもですね。
|
|
14
|
+
といった感じで頑張って調べてみるしかないかもですね。
|
|
15
|
+
|
|
16
|
+
---ここから追記---
|
|
17
|
+
情報が追加されたので試してみました。iPhoneでは見てないのでSafariとChromeの比較になりますがご了承ください。
|
|
18
|
+
|
|
19
|
+
結論から言うと、私の環境（Mac）ではSafariでもChromeでも同じフォントで表示されます。
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
▼Chrome
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
▼Safari
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
CSSは以下のとおり。
|
|
29
|
+
`/*追加*/`とある行以外は掲載されているCSSママです。
|
|
30
|
+
```CSS
|
|
31
|
+
@import url('https://fonts.googleapis.com/css?family=Josefin+Slab|Noto+Serif+JP'); /*追加*/
|
|
32
|
+
.c-wrap,.c-wrap p{
|
|
33
|
+
position:relative;
|
|
34
|
+
display: flex;
|
|
35
|
+
flex-direction: row;
|
|
36
|
+
justify-content: center;
|
|
37
|
+
width:100vw;
|
|
38
|
+
height:auto;
|
|
39
|
+
top:30px;
|
|
40
|
+
margin-bottom:200px;
|
|
41
|
+
}
|
|
42
|
+
.c-wrap img{
|
|
43
|
+
position:absolute;
|
|
44
|
+
z-index: -1;
|
|
45
|
+
width:130px;
|
|
46
|
+
height:auto;
|
|
47
|
+
opacity: 0.5;
|
|
48
|
+
}
|
|
49
|
+
p.c-en{
|
|
50
|
+
position: absolute;
|
|
51
|
+
font-size:50px;
|
|
52
|
+
font-family: 'Josefin Slab', serif;
|
|
53
|
+
top:10px;
|
|
54
|
+
text-shadow:3px 3px 4px white;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
h2.c-jp{
|
|
58
|
+
position: absolute;
|
|
59
|
+
font-size:15px;
|
|
60
|
+
font-family: 'Noto Serif JP', serif;
|
|
61
|
+
top:110px;
|
|
62
|
+
text-shadow:1px 1px 1px white;
|
|
63
|
+
padding-right:5px;
|
|
64
|
+
font-weight: normal; /*追加*/
|
|
65
|
+
}
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
IE11のようにGoogle Fonts自体がサポートを切ってしまった環境もあるので
|
|
69
|
+
Webフォントだからと言って全ての環境で表示されるとは限らないですが、
|
|
70
|
+
各デバイスにインストールされているフォント環境に依存せず、同じフォントを見せられるのが
|
|
71
|
+
Webフォントのウリなわけですから、フォントやサービス自体が非対応（orバグがある等）でもない限りは
|
|
72
|
+
正しく読み込めていれば違いはないはずです。
|
|
73
|
+
|
|
74
|
+
追加されたキャプチャを見る限り、環境依存とかデバイスごとの違いとかの以前に、
|
|
75
|
+
明らかにSafariだけ指定のWebフォントが読み込まれていない（適用できていない）です。
|
|
76
|
+
掲載されている情報以外に、絶対何か他の原因があるはずです。
|
1
書式の修正
answer
CHANGED
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
それでもSafariだけ正しく読み込めないということであれば、
|
|
4
4
|
どこか他のところに原因がある可能性もあるかと思います。
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
1. HTML、CSSともにバリデーターにかけてエラーがないか確認し、エラーがあるようであれば修正した上で
|
|
7
7
|
Google Fontsの表示を再確認する
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
2. 1でダメならまっさらなHTML・CSSを用意して、GoogleFontsの指定だけを試して正しく表示されるか確認する
|
|
10
10
|
|
|
11
11
|
3. 2で正しく表示されるのであれば読み込み方法は正しいので、他の部分に問題があることはほぼ確定。
|
|
12
12
|
あとは地道に少しずつ必要なCSSを足していってどこで表示されなくなるか確認し、問題のコードを調査する
|