The rendering of labels with borders leaves something to be desired:
- The border is cropped on the left side sometimes.
- The baseline seems a bit uneven, differing from letter to letter
- Kerning is increased the wider the border is, which looks odd
To see what I mean, replace the setFont() function in https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Labels.html&label=Showcases with the code below, Run the demo, and select setFont.
function setFont() {
Sandcastle.declare(setFont);
viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
label : {
text : 'Philadelphia',
font : '24px Helvetica',
fillColor : Cesium.Color.WHITE,
outlineColor : Cesium.Color.BLACK,
outlineWidth : 4,
style : Cesium.LabelStyle.FILL_AND_OUTLINE
}
});
}
The result looks like this: https://www.dropbox.com/s/2cubixlwq7u44r0/cesium-philadelphia.png?dl=0
You can see some border cropping on the left edge of most of these letters. The baseline difference is visible here though subtle. The kerning issue is less apparent but a label like "Karachi, Pakistan" makes those more apparent: https://www.dropbox.com/s/0nq9egqh110ghep/cesium-karachi.png?dl=0 -- check out the segment "kist" -- bleh!
Is there any work being done on this, or fonts or settings that work better?