Check font style and weight in addition to family

src/ol/css.js

@@ -2,6 +2,13 @@
  * @module ol/css
  */
 
+/**
+ * @typedef {Object} FontParameters
+ * @property {Array<string>} families
+ * @property {string} style
+ * @property {string} weight
+ */
+
 
 /**
  * The CSS class for hidden feature.
@@ -62,10 +69,13 @@ export const CLASS_COLLAPSED = 'ol-collapsed';
  * Get the list of font families from a font spec.  Note that this doesn't work
  * for font families that have commas in them.
  * @param {string} The CSS font property.
- * @return {Object<string>} The font families (or null if the input spec is invalid).
+ * @return {FontParameters} The font families (or null if the input spec is invalid).
  */
-export const getFontFamilies = (function() {
+export const getFontParameters = (function() {
   let style;
+  /**
+   * @type {Object<string, FontParameters>}
+   */
   const cache = {};
   return function(font) {
     if (!style) {
@@ -74,11 +84,18 @@ export const getFontFamilies = (function() {
     if (!(font in cache)) {
       style.font = font;
       const family = style.fontFamily;
+      const fontWeight = style.fontWeight;
+      const fontStyle = style.fontStyle;
       style.font = '';
       if (!family) {
         return null;
       }
-      cache[font] = family.split(/,\s?/);
+      const families = family.split(/,\s?/);
+      cache[font] = {
+        families: families,
+        weight: fontWeight,
+        style: fontStyle
+      };
     }
     return cache[font];
   };

src/ol/render/canvas.js

@@ -1,7 +1,7 @@
 /**
  * @module ol/render/canvas
  */
-import {getFontFamilies} from '../css.js';
+import {getFontParameters} from '../css.js';
 import {createCanvasContext2D} from '../dom.js';
 import {clear} from '../obj.js';
 import {create as createTransform} from '../transform.js';
@@ -204,32 +204,30 @@ export const checkFont = (function() {
   const text = 'wmytzilWMYTZIL@#/&?$%10\uF013';
   let interval, referenceWidth;
 
-  function isAvailable(font) {
+  /**
+   * @param {string} fontStyle Css font-style
+   * @param {string} fontWeight Css font-weight
+   * @param {*} fontFamily Css font-family
+   * @return {boolean} Font with style and weight is available
+   */
+  function isAvailable(fontStyle, fontWeight, fontFamily) {
     const context = getMeasureContext();
-    // Check weight ranges according to
-    // https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Fallback_weights
-    for (let weight = 100; weight <= 700; weight += 300) {
-      const fontWeight = weight + ' ';
-      let available = true;
-      for (let i = 0; i < len; ++i) {
-        const referenceFont = referenceFonts[i];
-        context.font = fontWeight + size + referenceFont;
-        referenceWidth = context.measureText(text).width;
-        if (font != referenceFont) {
-          context.font = fontWeight + size + font + ',' + referenceFont;
-          const width = context.measureText(text).width;
-          // If width and referenceWidth are the same, then the fallback was used
-          // instead of the font we wanted, so the font is not available.
-          available = available && width != referenceWidth;
-        }
-      }
-      if (available) {
-        // Consider font available when it is available in one weight range.
-        //FIXME With this we miss rare corner cases, so we should consider
-        //FIXME checking availability for each requested weight range.
-        return true;
+    let available = true;
+    for (let i = 0; i < len; ++i) {
+      const referenceFont = referenceFonts[i];
+      context.font = fontStyle + ' ' + fontWeight + ' ' + size + referenceFont;
+      referenceWidth = context.measureText(text).width;
+      if (fontFamily != referenceFont) {
+        context.font = fontStyle + ' ' + fontWeight + ' ' + size + fontFamily + ',' + referenceFont;
+        const width = context.measureText(text).width;
+        // If width and referenceWidth are the same, then the fallback was used
+        // instead of the font we wanted, so the font is not available.
+        available = available && width != referenceWidth;
       }
     }
+    if (available) {
+      return true;
+    }
     return false;
   }
 
@@ -237,14 +235,14 @@ export const checkFont = (function() {
     let done = true;
     for (const font in checked) {
       if (checked[font] < retries) {
-        if (isAvailable(font)) {
+        if (isAvailable.apply(this, font.split('\n'))) {
           checked[font] = retries;
           clear(textHeights);
           // Make sure that loaded fonts are picked up by Safari
           measureContext = null;
           measureFont = undefined;
           if (labelCache.getCount()) {
-          labelCache.clear();
+            labelCache.clear();
           }
         } else {
           ++checked[font];
@@ -259,16 +257,18 @@ export const checkFont = (function() {
   }
 
   return function(fontSpec) {
-    const fontFamilies = getFontFamilies(fontSpec);
-    if (!fontFamilies) {
+    const font = getFontParameters(fontSpec);
+    if (!font) {
       return;
     }
-    for (let i = 0, ii = fontFamilies.length; i < ii; ++i) {
-      const fontFamily = fontFamilies[i];
-      if (!(fontFamily in checked)) {
-        checked[fontFamily] = retries;
-        if (!isAvailable(fontFamily)) {
-          checked[fontFamily] = 0;
+    const families = font.families;
+    for (let i = 0, ii = families.length; i < ii; ++i) {
+      const family = families[i];
+      const key = font.style + '\n' + font.weight + '\n' + family;
+      if (!(key in checked)) {
+        checked[key] = retries;
+        if (!isAvailable(font.style, font.weight, family)) {
+          checked[key] = 0;
           if (interval === undefined) {
             interval = setInterval(check, 32);
           }