問題タブ [google-fonts]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - IE11 は、Google フォントを更新した後、すべてのテキストを太字で表示します
背景:内部 Web アプリで、Google フォントの Open Sans を使用しています。フォント ファイルをダウンロードしてアプリにバンドルしています (アプリはオフラインで動作する必要があります)。最近、Google がフォントの新しいバージョンを公開していることに気付き、その時点でそれを再ダウンロードして、アプリで更新しました。この時点で、CSS にフォントを含める方法も変更し、.woff および .woff2 形式のみを使用するようにしました (IE11 と Chrome のみをサポートする必要があります)。
問題:テスト サーバー上の自分のコンピューターでのこの更新以降、IE のみで、すべてのテキストが太字で表示されます。Chromeでは問題ありません。IE で localhost を使用してローカル コピーで表示すると、フォントは正常に動作します。他のコンピューターでは、常に正常に動作します。これまでのところ、同じ問題が発生している他のコンピューターは 1 台しか見たことがありません。
要素を調べると、使用するように正しく設定されてfont-weight: 400おり、IE11 の .woff ファイルを正しく使用しています。通常のフォントではなく太字のフォントを使用しているようです。
私だけの問題ではないことがわかったので、クライアントのコンピューターの多くでこの問題が発生しているのではないかと心配しています。
コード:以下は、フォントをインポートするために使用するコードです。これと以前との唯一の違いは、SVG やその他の形式をインポートしなくなったことです。
詳細: Web アプリは Angular 5 (Angular CLI を使用)、SASS を使用し、Jenkins を介して Tomcat Windows サーバーにデプロイされます。テスト サーバーは現在、開発モードで実行されています。
ブラウザのすべてのキャッシュをクリアしようとし、コンピュータを数回再起動しましたが、何も解決しません。
残念ながら、アプリは内部専用であるため、リンクできません。
以下は、テスト サーバーで表示した場合と localhost で表示した場合の違いのスクリーンショットです。
これはさまざまな要因の結果である可能性があると思いますので、追加情報を提供する必要がある場合はお知らせください。
html - Firefox 57.0.1 でカスタム フォントが低くレンダリングされる
そのため、Firefox のバージョン 57.0.1 を使用している Google Fonts の Nunito フォントで問題が発生しています。フォントをロードする方法は次のとおりです。
下線を引くと、バーがテキストの中央に表示され、コンテンツが垂直方向に正しく配置されません。
これは、正しくレンダリングされていない h3 要素を選択したときの Firefox デバッガーのコンテンツです。
垂直方向の配置と行の高さを変更しても、問題は解決しません。デバッガーからフォント ファミリを無効にすると、問題は解決します。フォントは他のブラウザで完全にレンダリングされます。
html - オフラインで使用するためにこれらの Google フォントを取得する方法
metronicWeb アプリケーションの構築にテーマを使用しています。各ページで、このコードは<head>タグの最初のコードです:
これらのフォントをローカルでオフラインで使用できるように、Google からこれらのフォントを取得する必要があります。どうすれば入手できますか? 代わりにどのコードを書くべきですか。ありがとう。