[扩展] Document Font Toggle（在网页字体和自定义字体之间切换）

Document Font Toggle

以前我们讨论过越来越多网页使用网页字体 web font（github，淘宝等），这导致我们在强制网页使用某一种字体（微软雅黑）的时候，这些网页字体会显示为不可识别字符，我们只能设置为允许这些网页允许自己的字体才可以恢复显示。

图片：图像 1.png

这个扩展可以单独地在网页字体和自定义字体当中便捷地切换，他提供了一个工具栏按钮，点击这个按钮可以进行字体切换，这样淘宝网就会显示出这些网页字体了，工具栏按钮蓝色表示使用自定义字体，红色表示使用网页字体。对了，还具有记忆功能，可记住你切换成什么字体。另外扩展还提供白名单和黑名单，可以永久性设置某个网页使用自定义字体还是网页字体。



另外，还可以使用usercontent.css代码，单独的这段代码已经就是在强制使用雅黑的情况下还可以正常显示特殊网页字体了：

*:not([class*="icon"]):not(i){font-family: "Segoe UI","Microsoft YaHei UI" !important;}

修改自：
http://bbs.kafan.cn/thread-1664505-1-1.html
http://bbs.kafan.cn/thread-1681393-1-1.html

这个，我了解的不多，但是淘宝什么的似乎真没注意到有什么显示不出来的网页字体，另外我觉得网站肯定不会因为小众就放弃大众吧？如果一个字体在大多数人的桌面显示不出来，那么哪怕它再漂亮也不会用的。

能有什么特别的实例来支撑这个扩展吗？

很多啊，比如淘宝啊，截图就是了，可能你没有强制设置f使用比如雅黑字体，同时取消允许网页使用自己字体的勾。

我说的网页字体英文是web font，这里是指类似于图形一样的 icon font。如果你强制使用雅黑，这些东西就显示不出来

@namespace url(http://www.w3.org/1999/xhtml);
  
input[type="text"] *, textarea *, pre *,
input[type="text"] , textarea , pre
 {font-family: Consolas, STXiHei  !important;}
  
*{font-family: Arial, STXiHei !important;
  
[class*="icon"], i{font-family: octicons,iconfont !important;}

我是这样写Stylish的CSS的（我喜欢华文细黑），最后一行对淘宝、Github都没问题了，还有哪些网站呢？

现在web font普及开来了，除了icon font，很多网页都是配合web font设计的。再用强制字体太暴力，破坏了网页的整体设计。
用@font-face替换常见本地字体，对web font没有影响，没有后遗症。

不错，创意值得肯定，不过Not available for Firefox 28.0

cmlx：不错，创意值得肯定，不过Not available for Firefox 28.0回到原帖

我31nightly装完都可以正常使用呢

这个扩展完全可以进一步啊，比方说用户可以建立一个白名单，对指定的url/域名不强制覆盖字体；以后fx支持css的unicode区段写法（或者现在依靠js来实现？）后，还能增加对指定的字符不强制覆盖字体的设置，然后扩展就能命名为fontish之类的名字，变成一个集中管理各种字体设置的综合性扩展……

hzhbest：@namespace url(http://www.w3.org/1999/xhtml);
  
input *, textarea *, pre *,
input , textarea , pre
 {font-family: C...回到原帖

试了一下，我改的是雅黑，改了以后反而github都是乱码了。

input[type="text"] *, textarea *, pre *,
input[type="text"] , textarea , pre
 {font-family: Consolas, "Microsoft YaHei UI"  !important;}
    
*{font-family: "Segoe UI","Microsoft YaHei UI" !important;
    
[class*="icon"], i{font-family: octicons,iconfont !important;}

fang5566：试了一下，我改的是雅黑，改了以后反而github都是乱码了。


input *, textarea *, pre *,
input , textarea , pre
 {font-family: Consolas, "Micro...回到原帖

抱歉，少了个大括号……

@namespace url(http://www.w3.org/1999/xhtml);
    
input[type="text"] *, textarea *, pre *,
input[type="text"] , textarea , pre
 {font-family: Consolas, STXiHei  !important;}
    
*{font-family: Arial, STXiHei !important;}
    
[class*="icon"], i
{font-family: octicons, global-iconfont, shop-iconfont, iconfont !important;}

对GitHun.com和淘宝都基本没问题，除了宝贝页面右上角“收藏店铺”的链接无论怎么改都没效果……

自己diy用face-font，要求不高，也没用MacType
http://bbs.kafan.cn/thread-1664442-1-2.html
不用雅黑，高分一片糊+虚。
最变态的是垃圾知道，图片代替文字，改字体各种丑，无解直接排除。

我用的样式，手动添加过滤

/*---已读链接---*/
a:visited, .fl:visited { color: #CC0000 !important}
 
/*---网页选中字体---*/
body ::-moz-selection {color:#000000;background-color:#E18B8D;text-shadow:none;}
 
/*---字体增强---*/
body, input {text-shadow: 0px 0px 1px #999;}
 
menubar > menu, menubar, menubutton, menulist, menuitem {
text-shadow: 0px 0px 1px #999;}
 
menupopup > * {
text-shadow: 0px 0px 1px #999;}
 
dialog, box, button, page, label, caption, textbox, input, select {
text-shadow: 0px 0px 1px #999;}
 
window {
text-shadow: 0px 0px 1px #999;}
 
 /*---中文雅黑，英文Georgia---*/
@-moz-document regexp("((?!xhs.me|instapaper.com|alipay.com|github.com|taobao.com|knewone.com|400gb.com|blogspot.com|tumblr.com|jianshu.io|pushbullet.com|idrugu.com|imgchr.com|itellyou.cn).)*"){
*{
font-family:"Georgia", "微软雅黑"  !important;}
 
 
pre, code, kbd, samp, var {
font-family: "Consolas", "微软雅黑"  !important;}
}

@fang5566
这个扩展不错，比手动添加过滤方便，但是不是支持firefox28

*:not([class*="icon"]):not(i){font-family: "Segoe UI","Microsoft YaHei UI" !important;}

这段代码能不能设置 中文使用雅黑，英文用Georgia呢，该怎么修改

brucmao：@fang5566
这个扩展不错，比手动添加过滤方便，但是不是支持firefox28
*:not():not(i){font-family: "Segoe UI","Microsoft YaHei UI" !important;}这段代...回到原帖

"Segoe UI" 这个改成Georgia吧

fang5566："Segoe UI" 这个改成Georgia吧回到原帖

Document Font Toggle
这个扩展只能把网页设置为一种字体吧，我想设置中文使用雅黑，英文用Georgia
我firefox这样设置后，不起作用

图片：图像 1.png