Skip to main content

Webkit 下中文字体问题的解决 | Solution to the problem of unexpected Chinese fonts in webkit

也许是仅局限于webkitgtk

之前尝试epiphany的时候就发现了这个问题，但是由于epiphany对我来说只是一个备用浏览器，所以没管它。 今天给empathy搞adium主题时这个问题再次蹦了出来，我决定干掉它。

https://bugs.launchpad.net/ubuntu/+source/webkit/+bug/502610 这里有些讨论，里面有个链接指向了改fontconfig的办法，但是我想我这里并不是这个问题，因为我在~/.fonts.conf里已经之定好了我希望的中文字体（主要是serif, sans-serif, monosapce这几个列表）,我还是觉得这个是webkit的问题。

empathy有个选项可以开启webkit debug模式：/apps/empathy/conversation/enable_webkit_developer_tools 我用它查看元素，发现字体总是sans...目前解决方法是手工改css，找到.msg的定义，加入 font-family: "font name 1", "font name 2";

另外就是epiphany，虽然它不能给各个语言指定字体，但是好歹支持用户css，于是加入如下内容：

@charset "UTF-8"; // 如果字体名有中文
* {
font-family: "font name 1", "font name 2" ! important;
}

这样问题基本可以解决



Or maybe it's only a bug for webkitgtk, I'm not sure.

Days before I encountered this bug when I was trying epiphany, but I didn't pay much attention on it since I use it only as a backup one. However today the bug came out and started to trouble me again when I was applying an adium theme for empathy, and then I decided to get rid of it.

There are quite some discussions in https://bugs.launchpad.net/ubuntu/+source/webkit/+bug/502610 , and someone there provided a solution that to modify config files of fontconfig. But I think it's not the case at least for me, since I've specified my preferred fonts of the generic font families (serif, sans-serif, monospace). I think it should be webkit's fault.

Enabling "/apps/empathy/conversation/enable_webkit_developer_tools" will enable the debug mode of empathy, where I can inspect the HTML elements (that's cool!), I found the font of messages are all "Sans", and I got no solution except for manually modifying the css file of the theme, just add the following lines in the ".msg" block

font-family: "font name 1", "font name 2";

About epiphany, I wonder why I cannot specify font for different languages/charsets just like firefox, but at least it supports user specified css, so I created one with the following content:

@charset "UTF-8"; // since the name of the font I'm using contains Chinese characters
* {
font-family: "font name 1", "font name 2" ! important;
}

and it works like a charm :)
Labels:

Comments

Post a Comment

Popular posts from this blog

Determine Perspective Lines With Off-page Vanishing Point

In perspective drawing, a vanishing point represents a group of parallel lines, in other words, a direction. For any point on the paper, if we want a line towards the same direction (in the 3d space), we simply draw a line through it and the vanishing point. But sometimes the vanishing point is too far away, such that it is outside the paper/canvas. In this example, we have a point P and two perspective lines L1 and L2. The vanishing point VP is naturally the intersection of L1 and L2. The task is to draw a line through P and VP, without having VP on the paper. I am aware of a few traditional solutions: 1. Use extra pieces of paper such that we can extend L1 and L2 until we see VP. 2. Draw everything in a smaller scale, such that we can see both P and VP on the paper. Draw the line and scale everything back. 3. Draw a perspective grid using the Brewer Method. #1 and #2 might be quite practical. #3 may not guarantee a solution, unless we can measure distances/p...
2 comments
Read More »

Chasing an IO Phantom

My home server has been weird since months ago, it just becomes unresponsive occassionally. It is annoying but it happens only rarely, so normally I'd just wait or reboot it. But weeks ago I decided to get to the bottom of it. What's Wrong My system set up is: Root: SSD, LUKS + LVM + Ext4 Data: HDD, LUKS + ZFS 16GB RAM + 1GB swap Rootless dockerd The system may become unresponsive, when the IO on HDD  is persistantly high for a while. Also: Often kswapd0 has high CPU High IO on root fs (SSD) From dockerd and some containers RAM usage is high, swap usage is low It is very strange that IO on HDD can affect SSD. Note that when this happens, even stopping the IO on HDD does not always help. Usually restarting dockerd does not help, but rebooting helps. Investigation: Swap An obvious potential root cause is the swap. High CPU on kswapd0 usually means the free memory is low and the kernel is busy exchanging data between disk and swap. However, I tried the following steps, none of the...
Post a Comment
Read More »

Moving Items Along Bezier Curves with CSS Animation (Part 2: Time Warp)

This is a follow-up of my earlier article.  I realized that there is another way of achieving the same effect. This article has lots of nice examples and explanations, the basic idea is to make very simple @keyframe rules, usually just a linear movement, then use timing function to distort the time, such that the motion path becomes the desired curve. I'd like to call it the "time warp" hack. Demo See the Pen Interactive cubic Bezier curve + CSS animation by Lu Wang ( @coolwanglu ) on CodePen . How does it work? Recall that a cubic Bezier curve is defined by this formula : \[B(t) = (1-t)^3P_0+3(1-t)^2tP_1+3(1-t)t^2P_2+t^3P_3,\ 0 \le t \le 1.\] In the 2D case, \(B(t)\) has two coordinates, \(x(t)\) and \(y(t)\). Define \(x_i\) to the be x coordinate of \(P_i\), then we have: \[x(t) = (1-t)^3x_0+3(1-t)^2tx_1+3(1-t)t^2x_2+t^3x_3,\ 0 \le t \le 1.\] So, for our animated element, we want to make sure that the x coordiante (i.e. the "left" CSS property) is \(...
3 comments
Read More »