Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to fix/work around QtWebKit's incorrect font fallback behavior?
    primarykey
    data
    text
    <p>I have a website in which some pages have user-generated content. I use phantomjs (based on QtWebKit) to take screenshots of the pages, so they must render perfectly in QtWebKit.</p> <p>The problem starts when the content is not in English. Then, popular browsers (such as Chrome and Firefox) fall back to the next font in the CSS font-family, up to the default font. However, in my tests, QtWebKit seems to exhibit different behavior: it incorrectly picks a font that's unable to render the content.</p> <p>Consider this example file, "fonts.html":</p> <pre><code>calibri, arial: &lt;div style="font-family: calibri, arial; font-size: 36px;"&gt; ฝ่ายอีเว้นท์พร้อมแล้วกับงานปาร์ตี้ที่สนุกที่สุดในกทม &lt;/div&gt; calibri: &lt;div style="font-family: calibri; font-size: 36px;"&gt; ฝ่ายอีเว้นท์พร้อมแล้วกับงานปาร์ตี้ที่สนุกที่สุดในกทม &lt;/div&gt; arial: &lt;div style="font-family: arial; font-size: 36px;"&gt; ฝ่ายอีเว้นท์พร้อมแล้วกับงานปาร์ตี้ที่สนุกที่สุดในกทม &lt;/div&gt; default: &lt;div style="font-size: 36px;"&gt; ฝ่ายอีเว้นท์พร้อมแล้วกับงานปาร์ตี้ที่สนุกที่สุดในกทม &lt;/div&gt; </code></pre> <p>Here's how it renders in Chrome and in Arora (a QtWebKit-based browser, that gives identical results to my phantomjs script):</p> <p><img src="https://i.stack.imgur.com/MDhPD.png" alt="Font fallback problem in Chrome vs QtWebKit"></p> <p>What I'd like to have is for the text to be rendered in Calibri and, if unsuitable for some characters, fall back to Arial.</p> <p>I'll accept either a solution that tells me how to configure QtWebKit to allow this (I couldn't find anything on the web), or how to change my HTML/CSS to "support QtWebKit".</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload