font | 易学教程

为什么em而不是px？

阅读更多关于为什么em而不是px？

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 我听说你应该使用em而不是像素来定义样式表中的大小和距离。所以问题是为什么在css中定义样式时我应该使用em而不是px？有一个很好的例子可以说明这一点吗？ #1楼顶部投票答案在这里从thomasrutter是正确的，他对 EM 响应。但是像素的大小是非常错误的。所以即使它已经老了，我也不能让它变得不成熟。电脑屏幕通常不是96dpi！（或者ppi，如果你想变得迂腐。）像素没有固定的物理尺寸。（是的，它仅在一个屏幕内固定，但在下一个屏幕中，像素很可能更大或更小，当然不是1/96英寸。）证明画一条线，长960像素。用物理标尺测量它。是10英寸？没有..？将笔记本电脑连接到电视。线路现在是10英寸？还没有？在iPhone上显示该行。还是一样大小？为什么不？谁发明了96dpi电脑屏幕神话？（有些宗教以72dpi神话运作。但同样错误。） #2楼例：代码：body {font-size：10px;} //将所有大小保持在10以下，更改此值，其余更改为例如此值的1.4 1 {font-size：1.2em;} // 12px 2 {font-size：1.4em;} // 14px 3 {font-size：1.6em;} // 16px 4 {font-size：1.8em

使用@font-face来实现icon

阅读更多关于使用@font-face来实现icon

@font-face制作Web Icon @font-face规则在css2中已经存在，但在css2.1中被删除，在css3中又重新被引入。自从Metro 风格被大多前段程序员青睐后，使用@font-face制作web icon 已经广泛使用于网页设计下面例子是制作Metro风格按钮 1.在网站 http://icomoon.io/app/ 上下载所需的图标压缩包中包含有相应的例子 2.把fonts文件夹添加都你的网页文件中，在css文件中初始化字体样式 @font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot'); src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('fonts/icomoon.woff') format('woff'), url('fonts/icomoon.ttf') format('truetype'), url('fonts/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } 3.引用字体样式 [data-icon]:before { font-family: 'icomoon';

python（文件）实例

阅读更多关于 python（文件）实例

01项目案例: 文件的备份Demo 02例：拷贝文件运行：结果： 02.1例：拷贝二进制文件（图片、音乐）如图片：要读取二进制文件,比如图片、视频等等,用’rb’, ‘wb’, 'ab’等模式打开文件即可. 运行：结果： 03例：国内镜像：pip install -i https://pypi.douban.com/simple pillow 码前提要：代码如下：例：验证码生成器 def draw_code_image ( str_code = 'A34G' ) : # 引入绘图模块, Image表示画布对象; ImageDraw表示画笔对象; ImageFont表示字体对象; from PIL import Image, ImageDraw, ImageFont # 定义变量,用于画面的背景色、宽、高 # RGB：(255,0,0), (0, 255,0), (0, 0, 255) bgcolor = ( random.randrange ( 20, 100 ) , random.randrange ( 20, 100 ) , 255 ) width = 100 height = 25 # 创建画布对象 im = Image.new ( 'RGB' , ( width, height ) , bgcolor ) # 创建画笔对象 draw = ImageDraw

img图片底部出现莫名的下边距问题

阅读更多关于 img图片底部出现莫名的下边距问题

谷歌中这样是解释的：图片底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关的。所以在某些时候，图片底部的空隙可能是 2px，而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小。解决办法：给img定义vertical-align或者display：block;，最优的解决办是定义vertical-align，注：定义vertical-align为middle时在IE6中大概还有一像素的顶边距，最好为top或bottom。当然还有种极端解决办法大家可以试试就是将父容器的字体大小为零，font-size:0 来源： https://www.cnblogs.com/jesse131/p/4769758.html

vue scss 一键更换主题色，字体等页面等页面大体样式

阅读更多关于 vue scss 一键更换主题色，字体等页面等页面大体样式

主要采用scss 编程式思想实现以上文件从上到下进行说明 _variables.scss 文件主要写主题色字体边框等变量内容如下： ————————————————————————————————————————————————— // colors $colors: ( // 主题色 'primary': #0066ff, "header-bg":#fff, "header-text":#000, 'pages-bg': #f6f7fb, 'border-color': #f2f2f2, 'page-bottom': #d4d9de, 'status-color': #c3672c, 'info': #4b67af, 'danger': #791a15, 'blue-1': #1f3695, 'blue': #1e78ff, 'gree': #07c160, 'white': #fff, 'white-1': #fcfcfc, 'white-2': #eceef0, 'light': #f9f9f9, 'light-1': #d4d9de, 'grey': #808080, 'grey-1': #666, 'dark-1': #343440, 'dark': #222, 'black': #212121, 'end': #fcb102, //warrary 页面steps

前端学习（163）:博客小练习

阅读更多关于前端学习（163）:博客小练习

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>博客静态页面</title> <link rel="stylesheet" href="./cssblog/common.css"> <style> #header{height: 64px;background: url(./imgblog/cst.jpg) no-repeat 446px 0,url(./imgblog/001.jpg);} #header h2{line-height: 64px;} #header .header_pifu{margin-top: 15px;} #header .header_title{margin-top: 15px;margin-right: 20px;} #main{height: 720px;background:url(./imgblog/001.jpg);} #main .main_left{width: 262px;height: 767px

常用CSS样式属性|CSS样式表

阅读更多关于常用CSS样式属性|CSS样式表

【长度单位】 CSS可使用长度单位单位单位说明范例 pt Point，就像是Word里面的Point一样大小 font-size:10pt px Pixels，依您屏幕分辨率而决定大小 font-size:10px pc Pica，6个Pica是一英吋 font-size:10pc mm 公厘，用过尺...这个设定值完全不会因为其它设定而改变 font-size:10mm cm 公分，不会因为使用者设定而改变 font-size:10cm % 百分比，大部分是指所在位置宽度或者长度百分比 font-size:10% 【颜色表示】 CSS可用颜色表示方式表示方式表示方式说明范例 #rrggbb 可以用Windows色彩选择工具找到 color:#feefc7 rgb(#,#,#) 用数字来表示红色蓝色以及绿色的混合...也可以用Windows色彩选择工具找 color:rgb(135,255,124) rgb(%,%,%) 用百分比来代表红色蓝色以及绿色的强度来混合颜色 color:rgb(70%,35%,41%) 颜色名称用颜色的名称来指定颜色 color:brown 【背景可用值】 CSS可用背景值名称说明可能值范例 background 背景下面的背景设定值皆适用 background:fixed background-attachment

css3之字体@font-face

阅读更多关于 css3之字体@font-face

@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。 Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字体)和.otf(OpenType)字体字体类型）。Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体. Chrome, Safari 和 Opera 也支持 SVG 字体/折叠. Internet Explorer 同样支持 EOT (Embedded OpenType) 字体. 注意： Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。语法： @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; } 这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。比如： p { font-size :12px; font-family : "My Font"; /*必须项，设置@font-face中font-family同样的值*/ } 来源： https://www.cnblogs

样式重置reset.css

阅读更多关于样式重置reset.css

/*清空浮动此类放在包含浮动的div里面*/ .clearfloat:after { display:block; clear:both; content:''; visibility:hidden; height:0; } .clearfloat { zoom:1; } /* 清除内外边距 */ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ fieldset, lengend, button, input, textarea, /* form elements 表单元素 */ th, td { /* table elements 表格元素 */ margin: 0; padding: 0; } /* 设置默认字体 */ body, button, input, select, textarea { /* for ie */ /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/ font: 12px/1 Tahoma,

CSS font 复合属性的顺序

阅读更多关于 CSS font 复合属性的顺序

CSS 参考手册实例在一个声明中设置所有字体属性： p.ex1 { font:italic arial,sans-serif; } p.ex2 { font:italic bold 12px/20px arial,sans-serif; } 亲自试一试浏览器支持 IE Firefox Chrome Safari Opera 所有浏览器都支持 font 属性。注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。定义和用法 font 简写属性在一个声明中设置所有字体属性。注释：此属性也有第六个值："line-height"，可设置行间距。说明这个简写属性用于一次设置元素字体的两个或更多方面。使用 icon 等关键字可以适当地设置元素的字体，使之与用户计算机环境中的某个方面一致。注意，如果没有使用这些关键词，至少要指定字体大小和字体系列。可以按顺序设置如下属性： font-style font-variant font-weight font-size/line-height font-family 可以不设置其中的某个值，比如 font:100% verdana; 也是允许的。未设置的属性会使用其默认值。默认值： not specified 继承性： yes 版本： CSS1 JavaScript 语法：

订阅 font