|
@@ -168,6 +168,27 @@ is very likely you are using the module in the wrong process. For example
|
|
|
`electron.app` can only be used in the main process, while `electron.webFrame`
|
|
|
is only available in renderer processes.
|
|
|
|
|
|
+## The font looks blurry, what is this and what can i do?
|
|
|
+
|
|
|
+If [sub-pixel anti-aliasing](http://alienryderflex.com/sub_pixel/) is deactivated, then fonts on LCD screens can look blurry. Example:
|
|
|
+
|
|
|
+![subpixel rendering example]
|
|
|
+
|
|
|
+Sub-pixel anti-aliasing needs a non-transparent background of the layer containing the font glyphs. (See [this issue](https://github.com/electron/electron/issues/6344#issuecomment-420371918) for more info).
|
|
|
+
|
|
|
+To achieve this goal, set the background in the constructor for [BrowserWindow][browser-window]:
|
|
|
+
|
|
|
+```javascript
|
|
|
+const { BrowserWindow } = require('electron')
|
|
|
+let win = new BrowserWindow({
|
|
|
+ backgroundColor: '#fff'
|
|
|
+})
|
|
|
+```
|
|
|
+
|
|
|
+The effect is visible only on (some?) LCD screens. Even if you dont see a difference, some of your users may. It is best to always set the background this way, unless you have reasons not to do so.
|
|
|
+
|
|
|
+Notice that just setting the background in the CSS does not have the desired effect.
|
|
|
+
|
|
|
[memory-management]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management
|
|
|
[variable-scope]: https://msdn.microsoft.com/library/bzt2dkta(v=vs.94).aspx
|
|
|
[electron-module]: https://www.npmjs.com/package/electron
|
|
@@ -175,3 +196,5 @@ is only available in renderer processes.
|
|
|
[local-storage]: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
|
|
|
[session-storage]: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
|
|
|
[indexed-db]: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
|
|
|
+[browser-window]: api/browser-window.md
|
|
|
+[subpixel rendering example]: images/code_coverage_infra_diagram.png
|