Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Different font family between { headless: false } and { headless: true } #922

Closed
mizdra opened this issue Sep 30, 2017 · 4 comments
Closed

Different font family between { headless: false } and { headless: true } #922

mizdra opened this issue Sep 30, 2017 · 4 comments

Comments

@mizdra
Copy link
Contributor

@mizdra mizdra commented Sep 30, 2017

Sorry, I report here because I did not understand where this issue should be reported to (DevTools Protocol or Chromium or Puppeteer) 馃檱

A default font family is Times New Roman in headless: true, however it is Hiragino Kaku Gothic ProN in headless: false. In my environment, Hiragino Kaku Gothic ProN is Standard font which is set at Settings > Customize fonts > Standard font. Is this behavior expected?

Test codes

const puppeteer = require('puppeteer');

const url = 'http://info.cern.ch';
const selector = 'h1';

const getFontProperty = async (page) => {
  const font = await page.evaluate((selector) => {
    const title = document.querySelector(selector);
    return getComputedStyle(title).font;
  }, selector);
  return font;
}

const printFontProperty = async (headless) => {
  const browser = await puppeteer.launch({headless: headless});
  const page = await browser.newPage();
  await page.goto(url);
  console.log(await getFontProperty(page));
  await browser.close();
}

(async () => {
  await printFontProperty(true);
  await printFontProperty(false);
})();

Output

$ node main.js
normal normal 700 normal 32px / normal "Times New Roman"
normal normal 700 normal 32px / normal "Hiragino Kaku Gothic ProN"

Environment

  • Puppeteer version: 0.11.0
  • Platform / OS version: macOS Sierra 10.12.6
  • Chrome Version: Chrome/63.0.3205.0 (Lang: Japanese)
  • Font config (Chromium)
    • Standard font: Hiragino Kaku Gothic ProN
    • Serif font: Hiragino Mincho ProN
    • Sans-serif font: Hiragino Kaku Gothic ProN
    • Fixed-width font: Osaka
@aslushnikov
Copy link
Collaborator

@aslushnikov aslushnikov commented Oct 4, 2017

@mizdra This looks like a different font resolution in chrome headless wrt chrome headful. Could you please file this to chromium (crbug.com/new) and post a link to the bug here?

@mizdra
Copy link
Contributor Author

@mizdra mizdra commented Oct 19, 2017

@aslushnikov
Copy link
Collaborator

@aslushnikov aslushnikov commented Oct 27, 2017

Thanks @mizdra.

I can't reproduce this bug as well, it looks like the setup is specific to your environment.

Closing this in favor of the upstream bug.

@LyleLaii
Copy link

@LyleLaii LyleLaii commented Dec 21, 2018

Now I met same issue.

This is in headless mode:
D:\backstopjs>node test1.js
{ fonts:
[ { familyName: 'Times New Roman',
isCustomFont: false,
glyphCount: 47 } ] }

This is in headful mode:
D:\backstopjs>node test1.js
{ fonts:
[ { familyName: 'Microsoft YaHei',
isCustomFont: false,
glyphCount: 47 } ] }

And my Chromium version is : 72.0.3617.0
Still need me to provide more information? Looking forward to your recovery, Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants