Web サイトで使用していた css font-family に何が起こったのかわかりません。昨日まで取り組んでいました。それから今朝、Chrome で動作しなくなり、その後 FireFox と Safari (Mac) で動作しなくなりました。
奇妙なことに、チームメイトのコンピューター (Linux) の 1 つで問題なく表示されますが、友人の Mac コンピューターでは問題が発生します。何が起こったのかわかりません。要素を調べると、CSS の font-family 属性が表示されますが、フォントが読み込まれていないかのように取り消し線が引かれています。
これは、CSS にフォントを追加する方法です。
@import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700|Open+Sans:600italic,400,600,700|Helvetica+Neue:400,500,700);
これが現在の外観であり、どのように見えるべきかです。
完全に立ち往生し、何が起こったのかわかりません。
部品を取り外し|Helvetica+Neue:400,500,700ます。
Google Web Fonts には Helvetica Neue は含まれていません。これは商用フォントであり、無料では入手できず、有料の Web フォントとしてもおそらく入手できません。
リクエストに Google Web Fonts に存在しないフォントがある場合、Google サーバーは 403 Forbidden で応答し、フォントを送信しません。これは、開発者ツール (F12) を使用し、ページをロードするときに [ネットワーク] セクションを見るとわかります。
要求を 3 つの要求 (フォント ファミリごとに 1 つ) に分割すると、他の要求は成功します。しかし、1 回のリクエストで 2 つのフォント ファミリを使用し、Helvetica Neue をドロップする (または Google が実際に持っているフォントに置き換える) 方が効率的です。
わかりました、動作しました。何が起こったのかわからない。私がしたことは、行を変更することだけです：
@import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700|Open+Sans:600italic,400,600,700|Helvetica+Neue:400,500,700);
に：
@import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600italic,400,600,700);
@import url(http://fonts.googleapis.com/css?family=Helvetica+Neue:400,500,700);
実際、Helvetica Neue は Google Fonts で入手できます。