首页
学习
活动
专区
圈层
工具
发布

CSS3文本与字体

,将被引用到Web元素中的font-family source:自定义的字体的存放路径,可以是相对路径也可以是绝路径 format:自定义字体的格式,主要用来帮助浏览器识别 weight:定义字体是否为粗体...style:定义字体样式,如斜体 */ 兼容性:IE9+、FireFox3.5+、Chrome4+、Safari3.2+、Opera10+ 2、CSS3 @font-face的字体格式 TureTpe...(.ttf)(Windows和Mac的最常见的字体,是一种RAW格式,因此不为网站优化) 兼容性:IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile...Safari4.2+ OpenType (.otf)(被认为是一种原始的字体格式,内置在TureType的基础上,所以也提供了更多的功能) 兼容性:FireFox3.5+、Chrome4+、Safari3.1...,可以从TrueType创建此格式字体) 兼容性:IE4+ SVG (.svg)(基于SVG字体渲染的一种格式) 兼容性:Chrome4+、Safari3.1+、Opera10+、IOS Mobile

2K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    移动端问题收集和解决

    tap击穿问题 问题描述 绑定tap方法的dom元素,触发该方法时,该dom元素下方同一位置的dom元素会触发click事件或者有浏览器认为可以被点击交互的dom元素(input的focus事件)...touchmove事件,e.preventEvent()将事件阻止 //封装一个tap事件 function tap(ele, callback) { var tag = 0; // 手机端和移动端不同处理...; /*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/ IOS字体大小重置 问题描述 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等) iOS 浏览器横屏时会重置字体大小,...设置 text-size-adjust 为 none 可以解决 iOS 上的问题,但桌面版 Safari 的字体缩放功能会失效,因此最佳方案是将 text-size-adjust 为 100% 。...,js中判断emoji表情的长度是不一致的,不同表情的length也不同,跟unicode编码有关。

    2.4K20

    【网页前端】CSS样式表进阶之图像的灵活使用与拓展知识

    5、点击“下载代码” 6、下载完毕,所有代码都在 download.zip 中 1.3.3 环境搭建 1 、解压压缩文件,打开解压的文件夹(文件夹名每次下载略有不同) 2、将需要的字体图标存入...IE9+ 、 Firefox3.5+ 、 Chrome4+ 、 Safari3+ 、 Opera10+ 、 iOS Mobile 、 Safari4.2+; Web Open...Font Format( .woff ) 格式 woff 字体,支持这种字体的浏览器有 IE9+ 、 Firefox3.5+ 、 Chrome6+ 、 Safari3.6+....svg ) 格式 .svg 字体是基于 SVG 字体渲染的一种格式,支持这种字体的浏览器有 Chrome4+ 、 Safari3.1+ 、 Opera10.0+ 、 iOS...格式: text-shadow : X 轴偏移 Y 轴偏移 模糊程度 阴影颜色 ; text-shadow: 5px 5px 5px #FF0000; 2.2 元素变成圆形 元素可以在表现形式上通过

    2.1K40

    彻底告别IE浏览器,再见了我的青春…

    Microsoft Edge 项目经理 Sean Lyndersay 表示: 我们宣布,Windows10 上的 Internet Explorer 的未来在 Microsoft Edge 中,Internet...Explorer11 桌面应用程序将于 2022 年 6 月 15 日退役并停止对某些版本的 Windows10 的支持。...Internet Explorer模式为您提供了内置的传统浏览器支持,用于仍然需要Internet Explorer的网站和应用程序。...事实上,Microsoft Edge是唯一对基于Internet Explorer的传统网站和应用程序具有内置兼容性的浏览器,包括对ActiveX控件等功能的支持。...希望你的收藏夹不仅仅是链接?用 "收藏 "来收集和组织你在网络上找到的信息会更容易。你喜欢在工作和个人使用中使用不同的浏览器吗?

    1.7K10

    移动端web开发笔记

    5、 移动端手机号码识别(IOS) 在 iOS Safari (其他浏览器和Android均不会)上会对那些看起来像是电话号码的数字处理为电话链接,比如: 7位数字,形如:1234567 带括号及加号的数字...以下是历史原因: 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上,使用了双击缩放(double tap to zoom)的方案,...双击缩放是指用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。...body元素的滚动条,所以一般都借助 iScroll; Android 3.0/iOS解决了非body元素的滚动问题,但滚动条不可见,同时iOS上只能通过2个手指进行滚动; Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果...) { .css{} } 22、audio元素和video元素在ios和andriod中无法自动播放 应对方案:触屏即播 $('html').one('touchstart',function(

    4.9K20

    62款前端数据可视化插件大盘点

    您可以使用他们的免费主机服务,或者安装在您自己的服务器上。Datawrapper用PHP编写,非常易于安装、修改和拓展。可以绘制。但是DataWrapper是生成图表后嵌入到站点的。 ?...提供超过100个图表类型,独特的特性,如缩放和交互式。 ? 小结: 每款插件各有千秋,根据项目需求挑选不同插件。.../jquery.sparkline/#s-about github: browser:Firefox 2+, Safari 3+, Opera 9, Chrome and Internet Explorer...6+,ios和andriod设备 resume:使用内嵌在HTML中的数据或通过javascript直接生成微线图(小内联图表),最主要的特点是可以生成波形图。...,使用了真实世界中的一些物理原理,你可以随意拖动图表中的元素。

    26.4K101

    彻底告别IE浏览器,再见了我的青春…

    Microsoft Edge 项目经理 Sean Lyndersay 表示: 我们宣布,Windows10 上的 Internet Explorer 的未来在 Microsoft Edge 中,Internet...Explorer11 桌面应用程序将于 2022 年 6 月 15 日退役并停止对某些版本的 Windows10 的支持。...Internet Explorer模式为您提供了内置的传统浏览器支持,用于仍然需要Internet Explorer的网站和应用程序。...事实上,Microsoft Edge是唯一对基于Internet Explorer的传统网站和应用程序具有内置兼容性的浏览器,包括对ActiveX控件等功能的支持。...希望你的收藏夹不仅仅是链接?用 "收藏 "来收集和组织你在网络上找到的信息会更容易。你喜欢在工作和个人使用中使用不同的浏览器吗?

    1.4K10

    在网页中使用自定义字体

    说到浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,这样大家有必要了解一下,各种版本的浏览器支持什么样的字体,前面也简单带到了有关字体的几种格式...【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】; 二、OpenType(.otf)格式: .otf字体被认为是一种原始的字体格式...,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2...【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】; 四、Embedded Open Type(.eot)格式: .eot字体是IE专用字体,可以从TrueType...+,iOS Mobile Safari3.2+】。

    2.2K10

    移动开发实用

    -- ios7.0版本以后,safari上已看不到效果 --> 将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式 的分享: 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上,使用了双击缩放 (double tap to...双击缩放是指用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。...1/2,例如视觉稿40px的字体,使用样式的写法为20px .css{font-size:20px} 参考《高清显示屏原理及设计方案》 ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉 ios用户点击一个链接...{ .css{} } audio元素和video元素在ios和andriod中无法自动播放 应对方案:触屏即播 $('html').one('touchstart',function(){

    8.4K30

    微信小程序布局单位的使用

    如在 iPhone6 上,屏幕宽度为750 px,则共有个750 物理像素,则750 rpx = 375px = 750 物理像素 例如 : 1rpx = 0.5px = 1物理像素 但是不同iOS设备上...上: 1rpx = 0.552px 1px = 1.81rpx 在不同设备上rpx与px的转换是不相同的,但是宽度的rpx却是固定的,所以可以使用rpx作为单位,来设置布局的宽高,不是所有的单位都适合...rpx,字体不适合rpx,会导致不同设备看不清。...根据设计稿按照1rem = 40px 对着各个元素进行单位转换 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是...vw, vh, vmin, vmax:IE9+局部支持,chrome/firefox/safari/opera支持,ios safari 8+支持,android browser4.4+支持,chrome

    3.6K61

    从零开始学 Web 之 CSS3(六)动画animation,Web字体

    TureTpe(.ttf)格式 .ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10...+、iOS Mobile、Safari4.2+; OpenType(.otf)格式 .otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,支持这种字体的浏览器有Firefox3.5+...,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1...SVG字体渲染的一种格式,支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+ 3、使用步骤 需要注意的是,我们在使用 Web...:和方法一一样,直接使用类属性 class='fa fa-play 的方式,fa-play是一个播放的图标,不同的图标的名字含义不同,只需要到 font-awesome 官网(http://www.fontawesome.com.cn

    1.8K10
    领券