Ggtcf

What can we do to stop prior company from asking us questions?

Integer addition + constant, is it a group?

What does the word "Atten" mean?

How does it work when somebody invests in my business?

Type int? vs type int

Trouble understanding the speech of overseas colleagues

How does Loki do this?

What is the best translation for "slot" in the context of multiplayer video games?

Applicability of Single Responsibility Principle

Why, precisely, is argon used in neutrino experiments?

How do scammers retract money, while you can’t?

What is the intuitive meaning of having a linear relationship between the logs of two variables?

Why not increase contact surface when reentering the atmosphere?

How did Doctor Strange see the winning outcome in Avengers: Infinity War?

Closest Prime Number

Is expanding the research of a group into machine learning as a PhD student risky?

You cannot touch me, but I can touch you, who am I?

What is the opposite of 'gravitas'?

How to safely derail a train during transit?

How do I find the solutions of the following equation?

Sequence of Tenses: Translating the subjunctive

India just shot down a satellite from the ground. At what altitude range is the resulting debris field?

Why are there no referendums in the US?

How to pronounce the slash sign

Font rendering bigger in cordova canvas than in mobile chrome

CSS Layout with Pixel And PercentsjQuery misalignment when using font-faceHow to fix @fontface vs. default font size - layout breaks if @fontface doesn't loadFont missing in wordpressCSS Import Font Issue@font-face fix in IE 9 and above but introduce new issue in IE 8@font-face returns 404s on fontsfont face not working on android chrome and firefoxBitmapText using fabricjsFonts difference between website & Invsion (Designers & Front End developers tool)

1

I'm facing a weird issue in my Cordova Application on Android.

I am drawing text to a canvas, like this:

context.textAlign = "center";
context.textBaseline = "middle";
context.font = "5px GameFont";
context.fillText("...", x, y);

However, the font renders bigger in the cordova application (Which uses the same browser view than my mobile chrome):

I'm loading the font via css:

@font-face 
 font-family: 'GameFont';
 font-style: normal;
 font-weight: normal;
 src: url('fonts/work-sans-v4-latin-600.woff2') format('woff2'),
 url('fonts/work-sans-v4-latin-600.woff') format('woff');

---

Things I tried

Using a default font:

I tried using Arial and the same issue occurs.

Ensuring the font is preloaded:

<span style="font-family: GameFont;" class="fontPreload">_</span>

Setting/normalizing css text properties:

text-rendering: optimizeLegibility;
font-style: normal;
text-decoration: none;
text-size-adjust: 100%;
letter-spacing: normal;
line-break: auto;
line-height: 1.2;
text-transform: none;
white-space: normal;
word-break: normal;
word-spacing: normal;
word-wrap: break-word;
font-stretch: 100%;

Preloading the font using document.fonts

const font = new FontFace(familyName, "url(" + url + ")", descriptors);
font.load().then(() => 
 document.fonts.add(font)
); 

---

Anybody already faced this issue? How can it get solved?

javascript android css cordova fonts

share|improve this question

edited Mar 8 at 11:04

tobspr

asked Mar 8 at 10:55

tobsprtobspr

6,06422139

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What you should check is the font size setting in Android Setting and see if they make any impact in rendering.
  
  – Gungnir
  Mar 8 at 11:09
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Gungnir actually this seems to be the case! Any idea how I could prevent this?
  
  – tobspr
  Mar 8 at 11:17
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  So, after playing arround a bit, it seems that while most of the font is scaled, the canvas drawing is not affected, only the html content. Any other idea?
  
  – tobspr
  Mar 8 at 11:41
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  For a quick "fix" you should try -webkit-text-size-adjust: none; in your css but imo the real fix would be to use font size specified in dp instead of px. Also if you have access to android code you can force your locally loaded webview font size with this: developer.android.com/reference/android/webkit/…
  
  – Gungnir
  Mar 8 at 11:58
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Gungnir I already have text-size-adjust in my css and it does not really do anything. I don't think it affects canvas rendering
  
  – tobspr
  Mar 8 at 13:55
  

  
  
  
  

add a comment | 

1

I'm facing a weird issue in my Cordova Application on Android.

I am drawing text to a canvas, like this:

context.textAlign = "center";
context.textBaseline = "middle";
context.font = "5px GameFont";
context.fillText("...", x, y);

However, the font renders bigger in the cordova application (Which uses the same browser view than my mobile chrome):

I'm loading the font via css:

@font-face 
 font-family: 'GameFont';
 font-style: normal;
 font-weight: normal;
 src: url('fonts/work-sans-v4-latin-600.woff2') format('woff2'),
 url('fonts/work-sans-v4-latin-600.woff') format('woff');

---

Things I tried

Using a default font:

I tried using Arial and the same issue occurs.

Ensuring the font is preloaded:

<span style="font-family: GameFont;" class="fontPreload">_</span>

Setting/normalizing css text properties:

text-rendering: optimizeLegibility;
font-style: normal;
text-decoration: none;
text-size-adjust: 100%;
letter-spacing: normal;
line-break: auto;
line-height: 1.2;
text-transform: none;
white-space: normal;
word-break: normal;
word-spacing: normal;
word-wrap: break-word;
font-stretch: 100%;

Preloading the font using document.fonts

const font = new FontFace(familyName, "url(" + url + ")", descriptors);
font.load().then(() => 
 document.fonts.add(font)
); 

---

Anybody already faced this issue? How can it get solved?

javascript android css cordova fonts

share|improve this question

edited Mar 8 at 11:04

tobspr

asked Mar 8 at 10:55

tobsprtobspr

6,06422139

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What you should check is the font size setting in Android Setting and see if they make any impact in rendering.
  
  – Gungnir
  Mar 8 at 11:09
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Gungnir actually this seems to be the case! Any idea how I could prevent this?
  
  – tobspr
  Mar 8 at 11:17
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  So, after playing arround a bit, it seems that while most of the font is scaled, the canvas drawing is not affected, only the html content. Any other idea?
  
  – tobspr
  Mar 8 at 11:41
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  For a quick "fix" you should try -webkit-text-size-adjust: none; in your css but imo the real fix would be to use font size specified in dp instead of px. Also if you have access to android code you can force your locally loaded webview font size with this: developer.android.com/reference/android/webkit/…
  
  – Gungnir
  Mar 8 at 11:58
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Gungnir I already have text-size-adjust in my css and it does not really do anything. I don't think it affects canvas rendering
  
  – tobspr
  Mar 8 at 13:55
  

  
  
  
  

add a comment | 

I'm facing a weird issue in my Cordova Application on Android.

I am drawing text to a canvas, like this:

context.textAlign = "center";
context.textBaseline = "middle";
context.font = "5px GameFont";
context.fillText("...", x, y);

However, the font renders bigger in the cordova application (Which uses the same browser view than my mobile chrome):

I'm loading the font via css:

@font-face 
 font-family: 'GameFont';
 font-style: normal;
 font-weight: normal;
 src: url('fonts/work-sans-v4-latin-600.woff2') format('woff2'),
 url('fonts/work-sans-v4-latin-600.woff') format('woff');

---

Things I tried

Using a default font:

I tried using Arial and the same issue occurs.

Ensuring the font is preloaded:

<span style="font-family: GameFont;" class="fontPreload">_</span>

Setting/normalizing css text properties:

text-rendering: optimizeLegibility;
font-style: normal;
text-decoration: none;
text-size-adjust: 100%;
letter-spacing: normal;
line-break: auto;
line-height: 1.2;
text-transform: none;
white-space: normal;
word-break: normal;
word-spacing: normal;
word-wrap: break-word;
font-stretch: 100%;

Preloading the font using document.fonts

const font = new FontFace(familyName, "url(" + url + ")", descriptors);
font.load().then(() => 
 document.fonts.add(font)
); 

---

Anybody already faced this issue? How can it get solved?

javascript android css cordova fonts

share|improve this question

edited Mar 8 at 11:04

tobspr

asked Mar 8 at 10:55

tobsprtobspr

6,06422139

context.textAlign = "center";
context.textBaseline = "middle";
context.font = "5px GameFont";
context.fillText("...", x, y);

@font-face 
 font-family: 'GameFont';
 font-style: normal;
 font-weight: normal;
 src: url('fonts/work-sans-v4-latin-600.woff2') format('woff2'),
 url('fonts/work-sans-v4-latin-600.woff') format('woff');

text-rendering: optimizeLegibility;
font-style: normal;
text-decoration: none;
text-size-adjust: 100%;
letter-spacing: normal;
line-break: auto;
line-height: 1.2;
text-transform: none;
white-space: normal;
word-break: normal;
word-spacing: normal;
word-wrap: break-word;
font-stretch: 100%;

const font = new FontFace(familyName, "url(" + url + ")", descriptors);
font.load().then(() => 
 document.fonts.add(font)
); 

javascript android css cordova fonts

javascript android css cordova fonts

share|improve this question

edited Mar 8 at 11:04

tobspr

asked Mar 8 at 10:55

tobsprtobspr

6,06422139

share|improve this question

edited Mar 8 at 11:04

tobspr

asked Mar 8 at 10:55

tobsprtobspr

6,06422139

asked Mar 8 at 10:55

tobsprtobspr

6,06422139

asked Mar 8 at 10:55

tobsprtobspr

6,06422139