Fix parsing of css font strings

data/styles/point_styledLabel_static.ts

@@ -14,7 +14,9 @@ const pointStyledLabel: Style = {
         offset: [0, 5],
         haloColor: '#000000',
         haloWidth: 5,
-        rotate: 45
+        rotate: 45,
+        fontStyle: 'normal',
+        fontWeight: 'normal'
       }]
     }
   ]

package.json

@@ -39,6 +39,7 @@
   },
   "dependencies": {
     "color-name": "^1.1.4",
+    "css-font-parser": "^2.0.0",
     "geostyler-style": "^7.2.0"
   },
   "peerDependencies": {

src/OlStyleParser.spec.ts

@@ -368,7 +368,7 @@ describe('OlStyleParser implements StyleParser', () => {
         const fontFamily = [
           ['arial', 'sans-serif'],
           ['Georgia', 'serif'],
-          ['"Neue Helvetica"', 'Helvetica', 'sans-serif']
+          ['Neue Helvetica', 'Helvetica', 'sans-serif']
         ];
         const font1 = `bold 5px ${fontFamily[0].join(', ')}`;
         const font2 = `italic bold 12px/30px ${fontFamily[1].join(', ')}`;

src/OlStyleParser.ts

@@ -1,3 +1,5 @@
+import { parseFont } from 'css-font-parser';
+
 import {
   CapType,
   FillSymbolizer,
@@ -403,24 +405,25 @@ export class OlStyleParser implements StyleParser<OlStyleLike> {
     const allowOverlap = olTextStyle.getOverflow() ? olTextStyle.getOverflow() : undefined;
     const text = olTextStyle.getText();
     const label = Array.isArray(text) ? text[0] : text;
-    let fontStyleWeightSize: string;
-    let fontSizePart: string[];
     let fontSize: number = Infinity;
     let fontFamily: string[]|undefined = undefined;
+    let fontWeight: 'normal' | 'bold' = 'normal';
+    let fontStyle: 'normal' | 'italic' | 'oblique' = 'normal';
 
     if (font) {
-      const fontSplit = font.split('px');
-      // font-size is always the first part of font-size/line-height
-      fontStyleWeightSize = fontSplit[0].trim();
-
-      fontSizePart = fontStyleWeightSize.split(' ');
-      // The last element contains font size
-      fontSize = parseInt(fontSizePart[fontSizePart.length - 1], 10);
-      const fontFamilyPart: string = fontSplit.length === 2 ?
-        fontSplit[1] : fontSplit[2];
-      fontFamily = fontFamilyPart.split(',').map((fn: string) => {
-        return fn.startsWith(' ') ? fn.slice(1) : fn;
-      });
+      const fontObj = parseFont(font);
+      if (fontObj['font-weight']) {
+        fontWeight = fontObj['font-weight'] as 'normal' | 'bold';
+      }
+      if (fontObj['font-size']) {
+        fontSize = parseInt(fontObj['font-size'], 10);
+      }
+      if (fontObj['font-family']) {
+        fontFamily = fontObj['font-family'];
+      }
+      if (fontObj['font-style']) {
+        fontStyle = fontObj['font-style'] as 'normal' | 'italic' | 'oblique';
+      }
     }
 
     return {
@@ -430,6 +433,8 @@ export class OlStyleParser implements StyleParser<OlStyleLike> {
       color: olFillStyle ? OlStyleUtil.getHexColor(olFillStyle.getColor() as string) : undefined,
       size: isFinite(fontSize) ? fontSize : undefined,
       font: fontFamily,
+      fontWeight,
+      fontStyle,
       offset: (offsetX !== undefined) && (offsetY !== undefined) ? [offsetX, offsetY] : [0, 0],
       haloColor: olStrokeStyle && olStrokeStyle.getColor() ?
         OlStyleUtil.getHexColor(olStrokeStyle.getColor() as string) : undefined,

src/Util/OlStyleUtil.ts

@@ -152,7 +152,7 @@ class OlStyleUtil {
 
     const size = symbolizer.size;
     const font = symbolizer.font;
-    return fontWeight + ' ' + fontStyle + ' ' + size + 'px ' + font;
+    return fontWeight + ' ' + fontStyle + ' ' + size + 'px ' + font?.join(', ');
   }