Giter Site home page Giter Site logo

Comments (4)

msokk avatar msokk commented on May 29, 2024

Hi!

What do you mean by default font? When no font-family is set in CSS?
Any example urls to share?

BTW, the image has ttf-mscorefonts-installer package installed, so all Microsoft fonts should be available. I haven't really tried rendering with custom system fonts. Arial/Times New Roman definitely worked at some point.

Additionally it would be useful to have the user agent definable somewhere, even if it's not per request.

I can expose this via environment variable, probably you need to override it fully, right?
Currently I append projects name and version to default Electron UA:

  webContents.setUserAgent(`${webContents.getUserAgent()} ${pjson.name}/${pjson.version}`);

from electron-render-service.

abale avatar abale commented on May 29, 2024

Turns out its actually due to the way linux renders the fonts - they were in fact present, but the rendering on linux is very bold/wide. No combination of fonts.conf or css hacks could get it to look normal. There was some promising work done by FreeType 2.7 to get things to look normal without subpixel sampling and auto-hinting, but even after installing it in the container it didn't seem to make a difference.

Thanks for the info about the user-agent, I will add this support.

edit: .fonts.conf

<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>
 <match target="font">
  <edit mode="assign" name="rgba">
   <const>rgb</const>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="hinting">
   <bool>true</bool>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="hintstyle">
   <const>hintslight</const>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="antialias">
   <bool>true</bool>
  </edit>
 </match>
  <match target="font">
    <edit mode="assign" name="lcdfilter">
      <const>lcddefault</const>
    </edit>
  </match>
</fontconfig>

from electron-render-service.

abale avatar abale commented on May 29, 2024

Here are some examples:

https://jsfiddle.net/xbphh42g/3/
libchromiumcontent w/msft fonts installed:
image
chrome via directwrite (on windows)
image

In some sites it can lead to formatting differences just because the fonts are rendered with different spacing:

https://letsencrypt.org/2016/09/20/what-it-costs-to-run-lets-encrypt.html
(libchromecontent ubuntu 16.04)
image
(chrome windows)
image

from electron-render-service.

msokk avatar msokk commented on May 29, 2024

Getting cross platform text rendering to look the same is tricky, as the libraries/stack used is totally different.
I haven't compared with Windows rendering much, mostly with OSX and it looks very similar to Linux platform:

(Electron 1.3.4 on OS X)
render-1475084568926

Also, looking at your Chrome on Windows screenshots, it looks like ClearType is turned off.
Here is mine:

(Chrome 53 on Windows 10)
capture

from electron-render-service.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.