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

編集履歴

質問編集履歴

10

2019/04/24 10:56

投稿

Miii
Miii

スコア30

title CHANGED
File without changes
body CHANGED
@@ -4,7 +4,7 @@
4
4
  どのブラウザでみても同じにしたい。
5
5
 
6
6
 
7
- 知人のiphoneで見た時に、表示崩れしていました。
7
+ 知人のiphoneで見た時に、表示が異なっていました。
8
8
  （ブラウザは恐らく標準ブラウザのsafariだと思います）
9
9
 
10
10
 

9

2019/04/24 10:56

投稿

Miii
Miii

スコア30

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,4 @@
1
- ### 実現したいこと
1
+ ### 実現したいこと(改変)
2
2
  webフォントの表示を、
3
3
  iphoneや、PCで見た時など、
4
4
  どのブラウザでみても同じにしたい。
@@ -8,7 +8,7 @@
8
8
  （ブラウザは恐らく標準ブラウザのsafariだと思います）
9
9
 
10
10
 
11
- ### 発生している問題(編集)
11
+ ### 発生している問題(改変)
12
12
  画像の上に文字を重ねているのですが、
13
13
  その文字がiosではフォントが正しく適用されません。
14
14
 

8

2019/04/24 10:55

投稿

Miii
Miii

スコア30

title CHANGED
File without changes
body CHANGED
@@ -1,8 +1,9 @@
1
1
  ### 実現したいこと
2
+ webフォントの表示を、
3
+ iphoneや、PCで見た時など、
4
+ どのブラウザでみても同じにしたい。
2
5
 
3
- iphoneで見た時とPCで見た時のフォントの表示を同じにしたい。
4
6
 
5
-
6
7
  知人のiphoneで見た時に、表示崩れしていました。
7
8
  （ブラウザは恐らく標準ブラウザのsafariだと思います）
8
9
 

7

2019/04/24 10:55

投稿

Miii
Miii

スコア30

title CHANGED
File without changes
body CHANGED
File without changes

6

2019/04/24 10:53

投稿

Miii
Miii

スコア30

title CHANGED
@@ -1,1 +1,1 @@
1
- ウェブフォントによる表示崩れ
1
+ safariだけwebフォントが適用されない
body CHANGED
@@ -7,20 +7,10 @@
7
7
  （ブラウザは恐らく標準ブラウザのsafariだと思います）
8
8
 
9
9
 
10
- ### 発生している問題
10
+ ### 発生している問題(編集)
11
11
  画像の上に文字を重ねているのですが、
12
- その文字がiosではフォントが違うので、少し画像とのバランスがズレています。
12
+ その文字がiosではフォントが正しく適用されません。
13
13
 
14
- ###詳細
15
- googlefontsのウェブフォントを使ってます。
16
- @import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP|Noto+Serif+JP');
17
- のようにCSSに記述しています。
18
-
19
- 適用先は、h2.test(仮)のようにh2（test）に適用しています。
20
- PCでは希望通りに表示されています。
21
-
22
-
23
- ###後述
24
14
  PCでもsafariでみるとやはりダメでした。
25
15
 
26
16
 
@@ -30,7 +20,8 @@
30
20
 
31
21
 
32
22
  ##追記 (※コードのみ全文再掲載)
23
+ 画像と文字、コードなど少し改変して、
33
- 画像と文字など少し改変して、載せています。（悩んでいること自体は同じです）
24
+ 載せています。（悩んでいること自体は同じです）
34
25
 
35
26
  ＜Chrome＞
36
27
  ![Chromeでの表示](b84b5de4fc313b8696c687c8a74be665.png)
@@ -120,15 +111,7 @@
120
111
  }
121
112
 
122
113
 
123
- 【他回答者様のアドバイスもあり、コードを質問当初から試行錯誤して変えたおかげか、
124
- 位置自体（画像と文字）はなんとかChrome、Firefox、そして、問題としていた、
125
- Safariでもそれぞれ中央に配置されるようになりました】
126
- ありがとうございます！
127
-
128
- ただ、他回答者様のおっしゃっていたとおり、
129
- レンダリングによる影響からか、フォントがChromeとSafariでは同じフォントを使っているんですが、
130
- 表示が異なります。
114
+ safariでも、
131
-
132
- できれば、Chromeのフォントで表示させたいです。
115
+ Chromeのフォントで表示させたいです。
133
116
  となると、やはり画像としてしまうのが一番手軽なのかもと感じています。
134
117
  ただ、容量や、今後大幅に改変することになると手間でしょうけど・・・

5

再掲載

2019/04/24 10:51

投稿

Miii
Miii

スコア30

title CHANGED
File without changes
body CHANGED
@@ -38,7 +38,7 @@
38
38
  ＜Safari＞
39
39
  ![サファリでの表示](3910c2cf77d39ab52bf8461ec1f2ccb7.png)
40
40
 
41
- ＜index.html＞
41
+ ＜index.htmlの記述全文＞
42
42
  <!DOCTYPE html>
43
43
  <html Lang="ja">
44
44
  <head>
@@ -63,7 +63,8 @@
63
63
  </body>
64
64
  </html>
65
65
 
66
+
66
- ＜style.css＞
67
+ ＜style.cssの記述全文＞
67
68
  @charset "utf-8";
68
69
  @import url('https://fonts.googleapis.com/css?family=Josefin+Slab:400i|Noto+Sans+JP|Noto+Serif+JP');
69
70
 

4

コード全文再掲載

2019/04/24 08:15

投稿

Miii
Miii

スコア30

title CHANGED
File without changes
body CHANGED
@@ -29,7 +29,7 @@
29
29
 
30
30
 
31
31
 
32
- ##追記
32
+ ##追記 (※コードのみ全文再掲載)
33
33
  画像と文字など少し改変して、載せています。（悩んでいること自体は同じです）
34
34
 
35
35
  ＜Chrome＞
@@ -38,15 +38,46 @@
38
38
  ＜Safari＞
39
39
  ![サファリでの表示](3910c2cf77d39ab52bf8461ec1f2ccb7.png)
40
40
 
41
- ＜HTML＞
41
+ ＜index.html＞
42
+ <!DOCTYPE html>
43
+ <html Lang="ja">
42
- （省略）
44
+ <head>
43
- <div class="c-wrap">
45
+ <meta charset="utf-8">
46
+ <title>test</title>
44
- <p><img src="img/circle.png" alt=""></p>
47
+ <meta name="viewport" content="width=device-width">
48
+
49
+ <!--************ noindex ************-->
45
- <p class="c-en">circleEN</p>
50
+ <meta name=”robots” content=”noindex” />
46
- <h2 class="c-jp">サークルJP</h2>
51
+ <!--*********************************-->
47
- </div>
48
52
 
53
+ <link rel="stylesheet" href="style.css">
54
+
55
+
56
+ </head>
57
+ <body>
58
+ <div class="c-wrap">
59
+ <p><img src="img/circle.png" alt=""></p>
60
+ <p class="c-en">circleEN</p>
61
+ <h2 class="c-jp">サークルJP</h2>
62
+ </div>
63
+ </body>
64
+ </html>
65
+
49
- ＜CSS＞
66
+ ＜style.css＞
67
+ @charset "utf-8";
68
+ @import url('https://fonts.googleapis.com/css?family=Josefin+Slab:400i|Noto+Sans+JP|Noto+Serif+JP');
69
+
70
+ *::before,*::after,
71
+ * {
72
+ -webkit-box-sizing: border-box;
73
+ -moz-box-sizing: border-box;
74
+ -o-box-sizing: border-box;
75
+ -ms-box-sizing: border-box;
76
+ box-sizing: border-box;
77
+ }
78
+
79
+
80
+
50
81
  .c-wrap,.c-wrap p{
51
82
  position:relative;
52
83
  display: flex;
@@ -64,6 +95,11 @@
64
95
  height:auto;
65
96
  opacity: 0.5;
66
97
  }
98
+
99
+
100
+
101
+
102
+
67
103
  p.c-en{
68
104
  position: absolute;
69
105
  font-size:50px;
@@ -79,8 +115,10 @@
79
115
  top:110px;
80
116
  text-shadow:1px 1px 1px white;
81
117
  padding-right:5px;
118
+ font-weight: normal; /*追加*/
82
119
  }
83
120
 
121
+
84
122
  【他回答者様のアドバイスもあり、コードを質問当初から試行錯誤して変えたおかげか、
85
123
  位置自体（画像と文字）はなんとかChrome、Firefox、そして、問題としていた、
86
124
  Safariでもそれぞれ中央に配置されるようになりました】

3

要点マークアップ

2019/04/24 08:14

投稿

Miii
Miii

スコア30

title CHANGED
File without changes
body CHANGED
@@ -81,9 +81,10 @@
81
81
  padding-right:5px;
82
82
  }
83
83
 
84
- 他回答者様のアドバイスもあり、コードを質問当初から試行錯誤して変えたおかげか、
84
+ 【他回答者様のアドバイスもあり、コードを質問当初から試行錯誤して変えたおかげか、
85
85
  位置自体（画像と文字）はなんとかChrome、Firefox、そして、問題としていた、
86
- Safariでもそれぞれ中央に配置されるようになりました。
86
+ Safariでもそれぞれ中央に配置されるようになりました】
87
+ ありがとうございます！
87
88
 
88
89
  ただ、他回答者様のおっしゃっていたとおり、
89
90
  レンダリングによる影響からか、フォントがChromeとSafariでは同じフォントを使っているんですが、

2

なんの画像かを記入

2019/04/24 06:04

投稿

Miii
Miii

スコア30

title CHANGED
File without changes
body CHANGED
@@ -32,7 +32,10 @@
32
32
  ##追記
33
33
  画像と文字など少し改変して、載せています。（悩んでいること自体は同じです）
34
34
 
35
+ ＜Chrome＞
35
36
  ![Chromeでの表示](b84b5de4fc313b8696c687c8a74be665.png)
37
+
38
+ ＜Safari＞
36
39
  ![サファリでの表示](3910c2cf77d39ab52bf8461ec1f2ccb7.png)
37
40
 
38
41
  ＜HTML＞

1

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

2019/04/24 05:54

投稿

Miii
Miii

スコア30

title CHANGED
File without changes
body CHANGED
@@ -24,4 +24,68 @@
24
24
  PCでもsafariでみるとやはりダメでした。
25
25
 
26
26
 
27
- かなり初歩的な質問かと思いますが、よろしくお願いします。
27
+ かなり初歩的な質問かと思いますが、よろしくお願いします。
28
+
29
+
30
+
31
+
32
+ ##追記
33
+ 画像と文字など少し改変して、載せています。（悩んでいること自体は同じです）
34
+
35
+ ![Chromeでの表示](b84b5de4fc313b8696c687c8a74be665.png)
36
+ ![サファリでの表示](3910c2cf77d39ab52bf8461ec1f2ccb7.png)
37
+
38
+ ＜HTML＞
39
+ （省略）
40
+ <div class="c-wrap">
41
+ <p><img src="img/circle.png" alt=""></p>
42
+ <p class="c-en">circleEN</p>
43
+ <h2 class="c-jp">サークルJP</h2>
44
+ </div>
45
+
46
+ ＜CSS＞
47
+ .c-wrap,.c-wrap p{
48
+ position:relative;
49
+ display: flex;
50
+ flex-direction: row;
51
+ justify-content: center;
52
+ width:100vw;
53
+ height:auto;
54
+ top:30px;
55
+ margin-bottom:200px;
56
+ }
57
+ .c-wrap img{
58
+ position:absolute;
59
+ z-index: -1;
60
+ width:130px;
61
+ height:auto;
62
+ opacity: 0.5;
63
+ }
64
+ p.c-en{
65
+ position: absolute;
66
+ font-size:50px;
67
+ font-family: 'Josefin Slab', serif;
68
+ top:10px;
69
+ text-shadow:3px 3px 4px white;
70
+ }
71
+
72
+ h2.c-jp{
73
+ position: absolute;
74
+ font-size:15px;
75
+ font-family: 'Noto Serif JP', serif;
76
+ top:110px;
77
+ text-shadow:1px 1px 1px white;
78
+ padding-right:5px;
79
+ }
80
+
81
+ 他回答者様のアドバイスもあり、コードを質問当初から試行錯誤して変えたおかげか、
82
+ 位置自体（画像と文字）はなんとかChrome、Firefox、そして、問題としていた、
83
+ Safariでもそれぞれ中央に配置されるようになりました。
84
+
85
+ ただ、他回答者様のおっしゃっていたとおり、
86
+ レンダリングによる影響からか、フォントがChromeとSafariでは同じフォントを使っているんですが、
87
+ 表示が異なります。
88
+
89
+ できれば、Chromeのフォントで表示させたいです。
90
+ となると、やはり画像としてしまうのが一番手軽なのかもと感じています。
91
+ ただ、容量や、今後大幅に改変することになると手間でしょうけど・・・