teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問safariだけwebフォントが適用されない

編集履歴

質問編集履歴

10

2019/04/24 10:56

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
 
12
12
 
13
- 知人のiphoneで見た時に、表示崩れしていました。
13
+ 知人のiphoneで見た時に、表示が異なっていました。
14
14
 
15
15
  （ブラウザは恐らく標準ブラウザのsafariだと思います）
16
16
 

9

2019/04/24 10:56

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ### 実現したいこと
1
+ ### 実現したいこと(改変)
2
2
 
3
3
  webフォントの表示を、
4
4
 
@@ -18,7 +18,7 @@
18
18
 
19
19
 
20
20
 
21
- ### 発生している問題(編集)
21
+ ### 発生している問題(改変)
22
22
 
23
23
  画像の上に文字を重ねているのですが、
24
24
 

8

2019/04/24 10:55

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,10 @@
1
1
  ### 実現したいこと
2
2
 
3
-
3
+ webフォントの表示を、
4
-
4
+
5
- iphoneで見た時とPCで見た時のフォントの表示を同じにしたい。
5
+ iphoneや、PCで見た時など、
6
+
7
+ どのブラウザでみても同じにしたい。
6
8
 
7
9
 
8
10
 

7

2019/04/24 10:55

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
File without changes

6

2019/04/24 10:53

投稿

Miii
Miii

スコア30

test CHANGED
@@ -1 +1 @@
1
- ウェブフォントによる表示崩れ
1
+ safariだけwebフォントが適用されない
test CHANGED
@@ -16,33 +16,13 @@
16
16
 
17
17
 
18
18
 
19
- ### 発生している問題
19
+ ### 発生している問題(編集)
20
20
 
21
21
  画像の上に文字を重ねているのですが、
22
22
 
23
- その文字がiosではフォントが違うので、少し画像とのバランスがズレています。
23
+ その文字がiosではフォントが正しく適用されません。
24
-
25
-
26
-
27
- ###詳細
24
+
28
-
29
- googlefontsのウェブフォントを使ってます。
25
+
30
-
31
- @import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP|Noto+Serif+JP');
32
-
33
- のようにCSSに記述しています。
34
-
35
-
36
-
37
- 適用先は、h2.test(仮)のようにh2（test）に適用しています。
38
-
39
- PCでは希望通りに表示されています。
40
-
41
-
42
-
43
-
44
-
45
- ###後述
46
26
 
47
27
  PCでもsafariでみるとやはりダメでした。
48
28
 
@@ -62,7 +42,9 @@
62
42
 
63
43
  ##追記 (※コードのみ全文再掲載)
64
44
 
45
+ 画像と文字、コードなど少し改変して、
46
+
65
- 画像と文字など少し改変して、載せています。（悩んでいること自体は同じです）
47
+ 載せています。（悩んでいること自体は同じです）
66
48
 
67
49
 
68
50
 
@@ -242,25 +224,9 @@
242
224
 
243
225
 
244
226
 
245
- 【他回答者様のアドバイスもあり、コードを質問当初から試行錯誤して変えたおかげか、
246
-
247
- 位置自体（画像と文字）はなんとかChrome、Firefox、そして、問題としていた、
248
-
249
- Safariでもそれぞれ中央に配置されるようになりました】
250
-
251
- ありがとうございます！
252
-
253
-
254
-
255
- ただ、他回答者様のおっしゃっていたとおり、
256
-
257
- レンダリングによる影響からか、フォントがChromeとSafariでは同じフォントを使っているんですが、
258
-
259
- 表示が異なります。
227
+ safariでも、
260
-
261
-
262
-
228
+
263
- できれば、Chromeのフォントで表示させたいです。
229
+ Chromeのフォントで表示させたいです。
264
230
 
265
231
  となると、やはり画像としてしまうのが一番手軽なのかもと感じています。
266
232
 

5

再掲載

2019/04/24 10:51

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -78,7 +78,7 @@
78
78
 
79
79
 
80
80
 
81
- ＜index.html＞
81
+ ＜index.htmlの記述全文＞
82
82
 
83
83
  <!DOCTYPE html>
84
84
 
@@ -128,7 +128,9 @@
128
128
 
129
129
 
130
130
 
131
+
132
+
131
- ＜style.css＞
133
+ ＜style.cssの記述全文＞
132
134
 
133
135
  @charset "utf-8";
134
136
 

4

コード全文再掲載

2019/04/24 08:15

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -60,7 +60,7 @@
60
60
 
61
61
 
62
62
 
63
- ##追記
63
+ ##追記 (※コードのみ全文再掲載)
64
64
 
65
65
  画像と文字など少し改変して、載せています。（悩んでいること自体は同じです）
66
66
 
@@ -78,23 +78,85 @@
78
78
 
79
79
 
80
80
 
81
- ＜HTML＞
81
+ ＜index.html＞
82
+
82
-
83
+ <!DOCTYPE html>
84
+
85
+ <html Lang="ja">
86
+
83
- （省略）
87
+ <head>
88
+
84
-
89
+ <meta charset="utf-8">
90
+
91
+ <title>test</title>
92
+
93
+ <meta name="viewport" content="width=device-width">
94
+
95
+
96
+
97
+ <!--************ noindex ************-->
98
+
99
+ <meta name=”robots” content=”noindex” />
100
+
101
+ <!--*********************************-->
102
+
103
+
104
+
105
+ <link rel="stylesheet" href="style.css">
106
+
107
+
108
+
109
+
110
+
111
+ </head>
112
+
113
+ <body>
114
+
85
- <div class="c-wrap">
115
+ <div class="c-wrap">
86
-
116
+
87
- <p><img src="img/circle.png" alt=""></p>
117
+ <p><img src="img/circle.png" alt=""></p>
88
-
118
+
89
- <p class="c-en">circleEN</p>
119
+ <p class="c-en">circleEN</p>
90
-
120
+
91
- <h2 class="c-jp">サークルJP</h2>
121
+ <h2 class="c-jp">サークルJP</h2>
92
-
122
+
93
- </div>
123
+ </div>
124
+
94
-
125
+ </body>
126
+
95
-
127
+ </html>
96
-
128
+
129
+
130
+
97
- ＜CSS＞
131
+ ＜style.css＞
132
+
133
+ @charset "utf-8";
134
+
135
+ @import url('https://fonts.googleapis.com/css?family=Josefin+Slab:400i|Noto+Sans+JP|Noto+Serif+JP');
136
+
137
+
138
+
139
+ *::before,*::after,
140
+
141
+ * {
142
+
143
+ -webkit-box-sizing: border-box;
144
+
145
+ -moz-box-sizing: border-box;
146
+
147
+ -o-box-sizing: border-box;
148
+
149
+ -ms-box-sizing: border-box;
150
+
151
+ box-sizing: border-box;
152
+
153
+ }
154
+
155
+
156
+
157
+
158
+
159
+
98
160
 
99
161
  .c-wrap,.c-wrap p{
100
162
 
@@ -130,6 +192,16 @@
130
192
 
131
193
  }
132
194
 
195
+
196
+
197
+
198
+
199
+
200
+
201
+
202
+
203
+
204
+
133
205
  p.c-en{
134
206
 
135
207
  position: absolute;
@@ -160,7 +232,11 @@
160
232
 
161
233
  padding-right:5px;
162
234
 
235
+ font-weight: normal; /*追加*/
236
+
163
- }
237
+ }
238
+
239
+
164
240
 
165
241
 
166
242
 

3

要点マークアップ

2019/04/24 08:14

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -164,11 +164,13 @@
164
164
 
165
165
 
166
166
 
167
- 他回答者様のアドバイスもあり、コードを質問当初から試行錯誤して変えたおかげか、
167
+ 【他回答者様のアドバイスもあり、コードを質問当初から試行錯誤して変えたおかげか、
168
168
 
169
169
  位置自体（画像と文字）はなんとかChrome、Firefox、そして、問題としていた、
170
170
 
171
- Safariでもそれぞれ中央に配置されるようになりました。
171
+ Safariでもそれぞれ中央に配置されるようになりました】
172
+
173
+ ありがとうございます！
172
174
 
173
175
 
174
176
 

2

なんの画像かを記入

2019/04/24 06:04

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -66,7 +66,13 @@
66
66
 
67
67
 
68
68
 
69
+ ＜Chrome＞
70
+
69
71
  ![Chromeでの表示](b84b5de4fc313b8696c687c8a74be665.png)
72
+
73
+
74
+
75
+ ＜Safari＞
70
76
 
71
77
  ![サファリでの表示](3910c2cf77d39ab52bf8461ec1f2ccb7.png)
72
78
 

1

スクリーンショットと、コードの開示

2019/04/24 05:54

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -51,3 +51,131 @@
51
51
 
52
52
 
53
53
  かなり初歩的な質問かと思いますが、よろしくお願いします。
54
+
55
+
56
+
57
+
58
+
59
+
60
+
61
+
62
+
63
+ ##追記
64
+
65
+ 画像と文字など少し改変して、載せています。（悩んでいること自体は同じです）
66
+
67
+
68
+
69
+ ![Chromeでの表示](b84b5de4fc313b8696c687c8a74be665.png)
70
+
71
+ ![サファリでの表示](3910c2cf77d39ab52bf8461ec1f2ccb7.png)
72
+
73
+
74
+
75
+ ＜HTML＞
76
+
77
+ （省略）
78
+
79
+ <div class="c-wrap">
80
+
81
+ <p><img src="img/circle.png" alt=""></p>
82
+
83
+ <p class="c-en">circleEN</p>
84
+
85
+ <h2 class="c-jp">サークルJP</h2>
86
+
87
+ </div>
88
+
89
+
90
+
91
+ ＜CSS＞
92
+
93
+ .c-wrap,.c-wrap p{
94
+
95
+ position:relative;
96
+
97
+ display: flex;
98
+
99
+ flex-direction: row;
100
+
101
+ justify-content: center;
102
+
103
+ width:100vw;
104
+
105
+ height:auto;
106
+
107
+ top:30px;
108
+
109
+ margin-bottom:200px;
110
+
111
+ }
112
+
113
+ .c-wrap img{
114
+
115
+ position:absolute;
116
+
117
+ z-index: -1;
118
+
119
+ width:130px;
120
+
121
+ height:auto;
122
+
123
+ opacity: 0.5;
124
+
125
+ }
126
+
127
+ p.c-en{
128
+
129
+ position: absolute;
130
+
131
+ font-size:50px;
132
+
133
+ font-family: 'Josefin Slab', serif;
134
+
135
+ top:10px;
136
+
137
+ text-shadow:3px 3px 4px white;
138
+
139
+ }
140
+
141
+
142
+
143
+ h2.c-jp{
144
+
145
+ position: absolute;
146
+
147
+ font-size:15px;
148
+
149
+ font-family: 'Noto Serif JP', serif;
150
+
151
+ top:110px;
152
+
153
+ text-shadow:1px 1px 1px white;
154
+
155
+ padding-right:5px;
156
+
157
+ }
158
+
159
+
160
+
161
+ 他回答者様のアドバイスもあり、コードを質問当初から試行錯誤して変えたおかげか、
162
+
163
+ 位置自体（画像と文字）はなんとかChrome、Firefox、そして、問題としていた、
164
+
165
+ Safariでもそれぞれ中央に配置されるようになりました。
166
+
167
+
168
+
169
+ ただ、他回答者様のおっしゃっていたとおり、
170
+
171
+ レンダリングによる影響からか、フォントがChromeとSafariでは同じフォントを使っているんですが、
172
+
173
+ 表示が異なります。
174
+
175
+
176
+
177
+ できれば、Chromeのフォントで表示させたいです。
178
+
179
+ となると、やはり画像としてしまうのが一番手軽なのかもと感じています。
180
+
181
+ ただ、容量や、今後大幅に改変することになると手間でしょうけど・・・