ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Check font availability in 3 different weight ranges

Browse Source
This commit is contained in:
ahocevar
2018-08-02 18:51:10 +02:00
parent c74faaa7ca
commit 62188502e9
1 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/ol/render/canvas.js
View File

@@ -195,20 +195,31 @@ export const checkFont = (function() {
function isAvailable(font) { function isAvailable(font) {
const context = getMeasureContext(); const context = getMeasureContext();
let available = true; // Check weight ranges according to
for (let i = 0; i < len; ++i) { // https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Fallback_weights
const referenceFont = referenceFonts[i]; for (let weight = 100; weight <= 700; weight += 300) {
context.font = size + referenceFont; const fontWeight = weight + ' ';
referenceWidth = context.measureText(text).width; let available = true;
if (font != referenceFont) { for (let i = 0; i < len; ++i) {
context.font = size + font + ',' + referenceFont; const referenceFont = referenceFonts[i];
const width = context.measureText(text).width; context.font = fontWeight + size + referenceFont;
// If width and referenceWidth are the same, then the fallback was used referenceWidth = context.measureText(text).width;
// instead of the font we wanted, so the font is not available. if (font != referenceFont) {
available = available && width != referenceWidth; 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;
} }
} }
return available; return false;
} }
function check() { function check() {