font | 易学教程

自适应布局的解决方案

阅读更多关于自适应布局的解决方案

曾几何时为了兼容IE低版本浏览器而头痛，以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代，为了处理各终端的适配而乱了手脚。对于混迹各社区的偶，时常发现大家拿手机淘宝的H5页面做讨论—— 手淘的H5页面是如何实现多终端的适配？那么趁此 Amfe阿里无线前端团队双11技术连载之际，用一个实战案例来告诉大家，手淘的H5页面是如何实现多终端适配的，希望这篇文章对大家在Mobile的世界中能过得更轻松。目标拿一个双11的Mobile页面来做案例，比如你实现一个类似下图的一个H5页面：目标很清晰，就是做一个这样的H5页面。 DEMO 请用手机扫下面的二维码痛点虽然H5的页面与PC的Web页面相比简单了不少，但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备。看看下图你就会知道，这是多么痛苦的一件事情：点击这里查看更多终端设备的参数。再来看看手淘H5要适配的终端设备数据：看到这些数据，是否死的心都有了，或者说为此捏了一把汗出来。手淘团队适配协作模式早期移动端开发，对于终端设备适配问题只属于Android系列，只不过很多设计师常常忽略Android适配问题，只出一套iOS平台设计稿。但随着iPhone6，iPhone6+的出现，从此终端适配问题不再是Android系列了，也从这个时候让移动端适配全面进入到“杂屏”时代。上图来自于

HTML第14章：单位和值

阅读更多关于 HTML第14章：单位和值

14-1颜色值在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种： 1、英文命令颜色前面几个小节中经常用到的就是这种设置方法： p { color : red ; } 2、RGB颜色这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。 p { color : rgb ( 133 , 45 , 200 ) ; } 每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如： p { color : rgb ( 20 % , 33 % , 25 % ) ; } 3、十六进制颜色这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。 p { color : # 00f fff ; } 配色表：注： color的设置代码要写在head里的style里 14-2 长度值长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。 1、像素像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）

CSS之①常用基本文字属性

阅读更多关于 CSS之①常用基本文字属性

CSS之①常用基本文字属性 QQ:3020889729 小蔡 CSS的作用·个人总结（粗鄙请谅解）正文·文字属性常用的文字属性概括常用文字属性的属性值介绍(使用属性赋值时要先使用一个':'号，外加一个空格，比如：color: red;) font-size的属性值 font-style的属性值 font-weight的属性值 font-family的属性值 font复合属性的使用 QQ:3020889729 小蔡 CSS的作用·个人总结（粗鄙请谅解）个人感觉，css是对html对网页显示的加工——就好比，一间房间需要装修一样。我们的网页内容也需要修饰之后才更适合对外。而css恰恰可以完善，单纯使用html来排版样式的繁琐和困难。作用一：本身脱于html，又与html息息相关，完善html的展示效果。作用二：因为css样式表中含有众多的选择器，每一个选择器可以用在不同的地方，使得html的内容可以呈现更多元的效果——最主要是，让html文档显得更清晰。（ps：才入手，可能有很多用处，只是呢在下还很菜~）正文·文字属性常用的文字属性概括常用文字属性包括：设置字体大小：font-size 设置字体样式：font-style 设置字体粗细：font-weight 设置字体：font-family 以及字体设置的复合属性：font 常用文字属性的属性值介绍

字体

阅读更多关于字体

1. 设置文字大小 font-size: 字体大小，默认16px，例如： font-size: 20px/30px /*20为字体大小，30位行高*/ 2. 设置字体 (1) font-family，设置字体 serif：衬线字体 sans-serif：非衬线字体 monospace：等宽字体 cusive：草书字体 fansty：虚幻字体 (2) font-style，字体是否倾斜 normal: 默认，正常显示 italic: 斜体 oblique: 文字倾斜注意: 大部分浏览器不会区分斜体和倾斜，一般只是用italic (3) font-weignt，字体粗细 normal: 正常显示 bold: 文字加粗显示 100-900之间的9个值 (4) font-varitant，设置小型大写字母（比大写字母小的大写字母） normal: 默认，正常显示 small-caps: 以小型大写字母显示简写：font: (...) 大小字体来源： CSDN 作者：心文花雨链接： https://blog.csdn.net/xinwenhuayu/article/details/104181454

web前端【第三篇】CSS选择器

阅读更多关于 web前端【第三篇】CSS选择器

一、css概述 CSS是Cascading Style Sheets的简称，中文称为层叠样式表，对html标签的渲染和布局 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。例如二、css的四种引入方式 1.行内式行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。 2.内嵌式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： 3.链接式建一个index.css的文件，存放样式在主页面中吧index.css引入 4.导入式将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：要注意导入的路径。。。。注意啦：导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会像导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。所以还是推荐用链接式。。。。。。。。。。。三、注意嵌套规则

zabbix4 图形界面中文乱码

阅读更多关于 zabbix4 图形界面中文乱码

web设置中文后，监控图没有文字或者是方框,搜索后发现是字体的问题，解决方法是上传支持中文的字体。 zabbix web 的PHP程序调用graphfont.ttf这个字体文件： /usr/share/zabbix/assets/fonts graphfont.ttf -> /etc/alternatives/zabbix-frontend-font graphfont.ttf指向/etc/alternatives/zabbix-frontend-font /etc/alternatives zabbix-frontend-font -> /usr/share/fonts/truetype/dejavu/DejaVuSans.ttf zabbix-frontend-font 指向 /usr/share/fonts/truetype/dejavu/DejaVuSans.ttf 我们通过修改zabbix-frontend-font的连接改变支持的字体：备份原连接 mv zabbix-frontend-font zabbix-frontend-font.bak 新建连接 ln -s /usr/share/fonts/ttf/simkai.ttf zabbix-frontend-font 注：simkai.ttf 是我上传的字体文件来源： 51CTO 作者： vincentkp 链接：

百度

阅读更多关于百度

效果图 HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>百度一下,你就知道</title> <link rel="stylesheet" href="css/nav.css" /> <link rel="stylesheet" href="css/center.css" /> <link rel="stylesheet" href="css/img.css" /> <link rel="stylesheet" href="css/bot.css" /> <link rel="stylesheet" href="img/font_1f632fq0apk/iconfont.css" /> <link rel="stylesheet" href="img/font_knm5rl5g2jk/iconfont.css" /> <link rel="icon" href="img/baidu.ico" type="image/x-icon" /> <style> * { margin: 0; padding: 0; } </style> </head> <body> <div class="nav"> <ul> <li> <a href="#">新闻</a> </li> <li> <a href="#"

Ubuntu gnome安装Monaco字体，FontForge module is probably not installed

阅读更多关于 Ubuntu gnome安装Monaco字体，FontForge module is probably not installed

首先下载原始Monaco字体，注意我只找到了这一款在ubuntu的gnome下可见，其他的各种monaco即使安装了也看不到。 https://gist.github.com/epegzz/1634235 为了可以使得终端可以显示丰富多彩的nerd，我决定自己来为monaco patch上nerd字体在使用nerd-font自定义一套monaco字体的时候，ubuntu18.04报了这个错误，官方说安装fontforge即可，但是安装过后依然无效，原来要安装的不是fontforge，卸载，安装如下两个包： sudo apt-get install python-fontforge sudo apt-get install python-configparser 开始patch字体，添加nerd ./font-patcher --fontawesome --fontawesomeextension --fontlinux --octicons --powersymbols --pomicons --powerline --powerlineextra --material --weather ./Monaco.ttf -out ./patched-fonts/ 注意，如果出现python报错例如：'ascii' codec can't decode byte 0xe4 in

手淘适配-flexible

阅读更多关于手淘适配-flexible

目标拿一个双11的Mobile页面来做案例，比如你实现一个类似下图的一个H5页面：目标很清晰，就是做一个这样的H5页面。痛点虽然H5的页面与PC的Web页面相比简单了不少，但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备。看看下图你就会知道，这是多么痛苦的一件事情：再来看看手淘H5要适配的终端设备数据：看到这些数据，是否死的心都有了，或者说为此捏了一把汗出来。手淘团队适配协作模式早期移动端开发，对于终端设备适配问题只属于Android系列，只不过很多设计师常常忽略Android适配问题，只出一套iOS平台设计稿。但随着iPhone6，iPhone6+的出现，从此终端适配问题不再是Android系列了，也从这个时候让移动端适配全面进入到“杂屏”时代。上图来自于 paintcodeapp.com 为了应对这多么的终端设备，设计师和前端开发之间又应该采用什么协作模式？或许大家对此也非常感兴趣。而整个手淘设计师和前端开发的适配协作基本思路是：选择一种尺寸作为设计和开发基准定义一套适配规则，自动适配剩下的两种尺寸(其实不仅这两种，你懂的) 特殊适配效果给出设计效果还是上一张图吧，因为一图胜过千言万语：在此也不做更多的阐述。在手淘的设计师和前端开发协作过程中：手淘设计师常选择iPhone6作为基准设计尺寸，交付给前端的设计尺寸是按 750px *

屏幕适配

阅读更多关于屏幕适配

rem是什么？ rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。 · 为什么web app要使用rem？这里我特别强调web app，web page就不能使用rem吗，其实也当然可以，不过出于兼容性的考虑在web app下使用更加能突显这个单位的价值和能力，接下来我们来看看目前一些企业的web app是怎么做屏幕适配的。 1、实现强大的屏幕适配布局：最近iphone6一下出了两款尺寸的手机，导致的移动端的屏幕种类更加的混乱，记得一两年前做web app有一种做法是以320宽度为标准去做适配，超过320的大小还是以320的规格去展示，这种实现方式以淘宝web app为代表作，但是近期手机淘宝首页进行了改版，采用了rem这个单位，首页以内依旧是和以前一样各种混乱，有定死宽度的页面，也有那种流式布局的页面。我们现在在切页面布局的使用常用的单位是px，这是一个绝对单位，web app的屏幕适配有很多中做法，例如：流式布局、限死宽度，还有就是通过响应式来做，但是这些方案都不是最佳的解决方法。

订阅 font