終了

貂明朝のwebフォントにおいて、Firefoxでcssでの文字色指定が効かない件

Community Beginner ,
Jul 26, 2019 Jul 26, 2019

リンクをクリップボードにコピー

コピー完了

貂明朝をwebフォントとしてつかっていたのですが、FirefoxでのみCSSでの文字色指定が効かなくなっていました。

以前の、

<script src="https://use.typekit.net/********.js"></script>

<script>try { Typekit.load({async: true}); } catch (e) {}</script>

と言う形で読み込む場合は、CSSが効いていました。

現在の、

<script>

  (function(d) {

    var config = {

      kitId: '********',

      scriptTimeout: 3000,

      async: true

    },

    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)

  })(document);

</script>

と言う形になってから、効かなくなってしまいました。

サポートに問い合わせをしたのですが、

>確認したところ、弊社の検証環境では「貂明朝」をwebフォント化させてCSSにて文字色を変更すると

>Firefoxでも色の変更が反映いたしました。

と返信がありました。

こちらの問題に関して、お知恵をお借りできないでしょうか。
よろしくお願いします。

表示

2.4K

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
Community Expert ,
Jul 26, 2019 Jul 26, 2019

リンクをクリップボードにコピー

コピー完了

記憶違いかもしれませんが、書き方が変わった際、cssも書き換えなければならなかったような気がします。

私も試してみましたが特に問題はないような気がします。次のページですのでご確認ください。

貂明朝Webフォントのテスト

(このページは数年後に削除します)

投票

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
Community Beginner ,
Jul 26, 2019 Jul 26, 2019

リンクをクリップボードにコピー

コピー完了

コメントありがとうございます。

テストページを確認させていただいたのですが、私のFirefox(68.0.1 (64 ビット))だと全て黒文字となっております。

その他のブラウザだとちゃんと色は変わっています。

スクリーンショット 2019-07-27 10.14.31.png

投票

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
Community Expert ,
Jul 26, 2019 Jul 26, 2019

リンクをクリップボードにコピー

コピー完了

私もFirefox(68.0.1 (64 ビット))ですが、色がついています。

ということは、Adobe Fontsの問題ではなく、

Firefoxの設定や機能拡張の要因の方が高い気がします。

Firefoxのプロファイル(Windows 10の場合は変更しない限り

C:\Users\{user_name}\AppData\Roaming\Mozilla\Firefox\Profiles

内にあります)を一度退避させて作り直すなど、

Firefox側のメンテナンスを行ってみてはどうでしょう。

Firefoxについては詳しくないので質問は受けかねます)

投票

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
Community Beginner ,
Jul 27, 2019 Jul 27, 2019

リンクをクリップボードにコピー

コピー完了

度々、ありがとうございます。

ご使用されているのはWindowsでしょうか?

私や同じように色が変わらない現象を確認できているのはMacとなります。

説明が不足しており、申し訳ありません。

MacのFirefoxでのみ起きる問題なのか、OS関係なく特定のFirefoxの設定で起きるのか。

webフォントとしての利用をしている為、設定の変更でしか対応できないのであれば、利用を考え直さねばなりません。。。

Adobe fontsの読み込み方やCSSの表記、制作側で対応できる方法が出来れば見つかればと思っています。

テストサイトや度々の確認など本当にありがとうございます。

投票

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
Community Expert ,
Jul 27, 2019 Jul 27, 2019

リンクをクリップボードにコピー

コピー完了

macOS Sierra 10.12.6

Firefox 68.0.1で色が付くのを確認しました。Firefoxは素の状態です。

k2b8692さん、「Mac」だけでなくバージョンもきちんと書くのをおすすめします。

面倒でしょうけど、検証でこうした細かい情報の提供は最低限必要なものです。

投票

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
レジェンド ,
Jul 27, 2019 Jul 27, 2019

リンクをクリップボードにコピー

コピー完了

ご報告まで…

Mac(10.14.5)/Firefox68.0.1で色が着かないのを確認しました。Firefoxは素の状態です。

--
Yamonov

投票

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
Community Beginner ,
Jul 27, 2019 Jul 27, 2019

リンクをクリップボードにコピー

コピー完了

最新

説明不足、申し訳ありません。

私の環境は、

macOS Mojave 10.14.5

Firefox 68.0.1

です。

Yamo74様と同じ環境となります。

Mac全体の問題ではなく、この環境の時に色が変わらなくなる現象が起きていますね。

>monokano様

アドバイス、ありがとうございます。
余裕のない状況で、全く配慮できておりませんでした。。。

投票

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines