Comments (4)
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.
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.
Here are some examples:
https://jsfiddle.net/xbphh42g/3/
libchromiumcontent w/msft fonts installed:
chrome via directwrite (on windows)
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)
(chrome windows)
from electron-render-service.
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:
Also, looking at your Chrome on Windows screenshots, it looks like ClearType is turned off.
Here is mine:
from electron-render-service.
Related Issues (20)
- Refactor waitForText to use HTML body (allows to wait for non-visual text) HOT 3
- Docker Swarm mode misc. points HOT 2
- Feature request: Debian packages HOT 4
- Styles not being rendered correctly HOT 3
- Empty PDFs when writing to file using Node.js... HOT 1
- insecure dependency
- How to disable certificate check? HOT 2
- Version 10 of node.js has been released
- Private Websites HOT 1
- Unable to install on Debian 9 HOT 1
- An in-range update of supertest is breaking the build 🚨 HOT 2
- Is this repo still maintained? HOT 7
- An in-range update of eslint is breaking the build 🚨 HOT 2
- An in-range update of electron is breaking the build 🚨 HOT 1
- An in-range update of electron is breaking the build 🚨 HOT 6
- An in-range update of eslint-plugin-jest is breaking the build 🚨 HOT 6
- An in-range update of eslint is breaking the build 🚨 HOT 3
- An in-range update of prettier is breaking the build 🚨 HOT 1
- An in-range update of eslint-plugin-import is breaking the build 🚨 HOT 3
- How to use the service with a wikimedia page that needs authentication? HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from electron-render-service.