Updates font settings for rendering tests

This updates font name and size for renderinge tests that
include TextStyles.

rendering/cases/layer-vector-decluttering/main.js

@@ -90,7 +90,7 @@ layer2.setStyle(function(feature) {
   return new Style({
     text: new Text({
       text: feature.get('text'),
-      font: '16px "Ubuntu Regular"'
+      font: '16px Ubuntu'
     })
   });
 });
@@ -119,7 +119,7 @@ layer3.setStyle(function(feature) {
     }),
     text: new Text({
       text: feature.get('text'),
-      font: '16px "Ubuntu Regular"',
+      font: '16px Ubuntu',
       textBaseline: 'bottom',
       offsetY: -5
     })
@@ -151,7 +151,7 @@ line.setStyle(new Style({
   text: new Text({
     placement: 'line',
     text: 'east-west',
-    font: '16px "Ubuntu Regular"',
+    font: '16px Ubuntu',
     overflow: true
   })
 }));

rendering/cases/layer-vectorimage-decluttering/main.js

@@ -4,9 +4,6 @@ import View from '../../../src/ol/View.js';
 import VectorSource from '../../../src/ol/source/Vector.js';
 import Style from '../../../src/ol/style/Style.js';
 import Stroke from '../../../src/ol/style/Stroke.js';
-// import Polygon from '../../../src/ol/geom/Polygon.js';
-// import Circle from '../../../src/ol/geom/Circle.js';
-// import LineString from '../../../src/ol/geom/LineString.js';
 import VectorImageLayer from '../../../src/ol/layer/VectorImage.js';
 import CircleStyle from '../../../src/ol/style/Circle.js';
 import Point from '../../../src/ol/geom/Point.js';
@@ -28,7 +25,7 @@ const vectorLayer1 = new VectorImageLayer({
       }),
       text: new Text({
         text: feature.get('text'),
-        font: '16px "Ubuntu Regular"'
+        font: '16px Ubuntu'
       })
     });
   }
@@ -60,12 +57,13 @@ line.setStyle(new Style({
   text: new Text({
     placement: 'line',
     text: 'east-west',
-    font: '16px "Ubuntu Regular"'
+    font: '16px Ubuntu'
   })
 }));
 source.addFeature(line);
 
 const map = new Map({
+  pixelRatio: 1,
   layers: [
     vectorLayer1
   ],
@@ -78,4 +76,4 @@ const map = new Map({
 
 map.getView().fit(source.getExtent());
 
-render({tolerance: 0.005});
+render({tolerance: 0.02});

rendering/cases/text-style-linestring-nice/main.js

@@ -23,7 +23,7 @@ feature1.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'Hello world',
-    font: '"Ubuntu Regular"',
+    font: '10px Ubuntu',
     placement: 'line'
   })
 }));
@@ -36,11 +36,11 @@ feature2.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'Scale 2',
+    font: 'normal 400 12px/1 Ubuntu',
     scale: 2,
     textBaseline: 'bottom',
     textAlign: 'right',
-    placement: 'line',
+    placement: 'line'
-    font: 'bold italic 0.8em "Ubuntu Regular"'
   })
 }));
 vectorSource.addFeature(feature2);
@@ -51,11 +51,10 @@ const feature3 = new Feature({geometry: lineString3});
 feature3.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
-    font: '"Ubuntu Regular"',
+    font: 'italic bold 0.75em Ubuntu',
     text: 'Set properties'
   })
 }));
-feature3.getStyle().getText().setFont('bold italic 1.2em "Ubuntu Regular"');
 feature3.getStyle().getText().setTextAlign('left');
 feature3.getStyle().getText().setOffsetX(10);
 feature3.getStyle().getText().setOffsetY(-10);
@@ -73,7 +72,7 @@ feature4.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'negative offsetX',
-    font: '"Ubuntu Regular"',
+    font: 'normal 400 10px/1 Ubuntu',
     offsetX: -10,
     textAlign: 'start',
     textBaseline: 'top',
@@ -89,7 +88,7 @@ feature5.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'Small text',
-    font: '"Ubuntu Regular"',
+    font: '10px Ubuntu',
     offsetY: 5,
     scale: 0.7,
     textAlign: 'end',
@@ -105,7 +104,7 @@ feature6.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'FILL AND STROKE',
-    font: '"Ubuntu Regular"',
+    font: '10px Ubuntu',
     placement: 'line',
     fill: new Fill({color: '#FFC0CB'}),
     stroke: new Stroke({

rendering/cases/text-style-linestring-ugly/main.js

@@ -20,7 +20,7 @@ feature1.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'Hello world',
-    font: '"Ubuntu Regular"',
+    font: '10px Ubuntu',
     placement: 'line',
     overflow: true
   })
@@ -38,7 +38,7 @@ feature2.setStyle(new Style({
     textBaseline: 'bottom',
     textAlign: 'right',
     placement: 'line',
-    font: 'bold italic 0.8em "Ubuntu Regular"',
+    font: 'italic bold 0.5em Ubuntu',
     overflow: true
   })
 }));
@@ -53,7 +53,6 @@ feature3.setStyle(new Style({
     text: 'Set properties'
   })
 }));
-feature3.getStyle().getText().setFont('bold italic 1.2em monospace');
 feature3.getStyle().getText().setTextAlign('left');
 feature3.getStyle().getText().setOffsetX(10);
 feature3.getStyle().getText().setOffsetY(-10);
@@ -73,7 +72,7 @@ feature4.setStyle(new Style({
   stroke: new Stroke({color: 'red'}),
   text: new Text({
     text: 'PLEASE OMIT ME IM UGLY',
-    font: '"Ubuntu Regular"',
+    font: '10px Ubuntu',
     offsetX: -10,
     textAlign: 'start',
     textBaseline: 'top',
@@ -90,7 +89,7 @@ feature5.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'Small text',
-    font: '"Ubuntu Regular"',
+    font: '10px Ubuntu',
     offsetY: 5,
     scale: 0.7,
     rotation: 4,
@@ -109,7 +108,7 @@ feature6.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'FILL AND STROKE',
-    font: '"Ubuntu Regular"',
+    font: '10px Ubuntu',
     placement: 'line',
     overflow: true,
     fill: new Fill({color: '#FFC0CB'}),

rendering/cases/text-style-overlap/main.js

@@ -19,7 +19,7 @@ const vectorSource = new VectorSource();
 const pointStyle = new Style({
   text: new Text({
     text: 'Point Label',
-    font: '"Ubuntu Regular"',
+    font: 'Ubuntu',
     fill: new Fill({
       color: 'red'
     }),
@@ -32,7 +32,7 @@ const lineStyle = new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'Line Label',
-    font: '"Ubuntu Regular"',
+    font: 'Ubuntu',
     fill: new Fill({
       color: 'red'
     }),

rendering/cases/text-style/main.js

@@ -20,7 +20,7 @@ feature = new Feature({
 feature.setStyle(new Style({
   text: new Text({
     text: 'hello',
-    font: '14px "Ubuntu Regular"',
+    font: '12px Ubuntu',
     scale: 2,
     fill: new Fill({
       color: 'red'
@@ -39,7 +39,7 @@ feature = new Feature({
 feature.setStyle(new Style({
   text: new Text({
     text: 'upside down',
-    font: '14px "Ubuntu Regular"',
+    font: '12px Ubuntu',
     rotation: Math.PI,
     stroke: new Stroke({
       color: 'red',
@@ -55,7 +55,7 @@ feature = new Feature({
 });
 feature.setStyle(new Style({
   text: new Text({
-    font: '"Ubuntu Regular"',
+    font: 'Ubuntu',
     text: 'rotateWithView',
     rotateWithView: true,
     stroke: new Stroke({
@@ -72,7 +72,7 @@ feature = new Feature({
 feature.setStyle(new Style({
   text: new Text({
     text: 'hello',
-    font: '14px "Ubuntu Regular"',
+    font: '12px Ubuntu',
     padding: [1, 2, 3, 5],
     backgroundFill: new Fill({
       color: 'rgba(55, 55, 55, 0.25)'
@@ -92,7 +92,7 @@ feature = new Feature({
 feature.setStyle(new Style({
   text: new Text({
     text: 'hello',
-    font: '14px "Ubuntu Regular"',
+    font: '12px Ubuntu',
     padding: [1, 2, 3, 5],
     backgroundFill: new Fill({
       color: 'rgba(55, 55, 55, 0.25)'

rendering/default/index.html

@@ -17,13 +17,13 @@
         display: none;
       }
       @font-face {
-        font-family: "Ubuntu Regular";
+        font-family: "Ubuntu";
         src: url("/data/fonts/ubuntu-regular-webfont.eot");
         src: url("/data/fonts/ubuntu-regular-webfont.woff") format("woff"),
           url("/data/fonts/ubuntu-regular-webfont.svg#filename") format("svg");
       }
       @font-face {
-        font-family: "Ubuntu Regular";
+        font-family: "Ubuntu";
         font-weight: bold;
         font-style: italic;
         src: url("/data/fonts/ubuntu-bold-italic-webfont.eot");