标签： css

自定义Chrome网页CSS样式字体图标出现方框的解决办法

发布于 由 Z 撰写包含于 分享留言

自定义Chrome后，很多网页的页面内容图标都显示为方框。
问题就在于自定义了CSS显示样式里的强制字体。

*{font-family: "Microsoft Yahei", "Microsoft Yahei"!important;}

将代码改为：

*{font-family: "Microsoft Yahei", "iconfont" !important;}

可以解决部分使用iconfont的字体不显示图标问题
或者改为下面代码，可解决大部分网页不显示的问题

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

不过这些都没法解决全部，有些网站还是会不显示，最好的办法就是停用强制字体的CSS样式，用mactype修改系统字体显示。

简单定义一个按钮样式

发布于 由 Z 撰写包含于 分享留言

利用好CSS可以制作出精美的效果，比如下面的各种按钮：
buttons
这里拿个简单的做例子，比如CSS代码如下：

a{
    border: 0px none;
    font-family: 'Open Sans','Microsoft YaHei', sans-serif;
    font-size: 100%;
    font-style: inherit;
}
a.z-button,
a.z-button:visited {
    display: inline-block;
    color: #fff!important;
    background: #ff4a64;
    text-decoration: none!important;
    text-align: center;
    font-weight: 700;
    outline: none;
    border-radius: 2px;
    line-height: 1em;
    padding: 10px 20px!important;
    cursor: pointer;
    margin: 0 0.1em 1.5em 0!important;
    vertical-align: middle;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
}
a.z-button:hover {
    text-decoration: none;
    background: #fd3e59;
}
a.z-button:active {
    position: relative;
    top: 1px;
}

使用时候只需要定义 a 标签的class属性为z-button就可以调用css样式
最终的显示效果就是这样的：
Download