首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

CSS3魔法堂:认识@font-face和Font Icon

file uri scheme的情况下(file:///),由于FireFox默认的file uri origin策略十分严格,不同路径等级则无法访问。所以相对路径被视为跨域操作,因此字库加载失败。...http/https uri scheme的情况下(http:///或https:///),则需要对.eot、.ttf和.woff等字体文件的响应头中加入 Access-Control-Allow-Origin...但这类符号实体是固化浏览器中,没办法对其进行自定义,所以我们往往会使用图片来代替。...Web实体符不像HTML实体那样规定必须以 &entity_name 、 &#entity_number 形式表示,而是更灵活的表示方式(如字母A就代表某个字体图标等)   首先我们要获取为Font Icon...Font Awesome    由robmadole和supercodepoet两大师Bootstrap Icon的基础上将Icon图片换成Font Icon。 ?   然后按第二节的方式使用即可。

2K80

CSS字体font

字体大小 font-size 设置字体的大小 ,px 是一个单位,代表屏幕的上的像素,css大多数数值都需要添加单位 font-size: 12px; 字体粗细 font-weight 设置字体的粗细...,取值:默认(normal) 、加粗(bold)、 100 - 900 font-weight:bold 因为字体初始设计的时候就没有设置太多的粗细标准,用数字设置的时候,只有400和700会产生变化...,实际工作中 用的最多的就是normal(400) bold(700) 字体风格 font-style 设置字体的风格(样式) 取值:normal 默认 显示标准的字体样式 italic 字体倾斜...,了解:http://code.ciaoca.com/style/cssfont2unicode/ font: font-style font-weight font-size/line-height...) line-height:值; 值的取值是像素 **小技巧:如果将标签的高度和行高设置成一样,那么这个标签里面的文字可以在这个标签里面垂直居中 两者结合使用可以让单行文字标签内部水平垂直居中 文字的对齐

2.9K30

Fontello:免费Web-font 图标大集合(font-face 图标集)

相关技术探讨 以前的话,图标在网页设计中的运用都是通过图片的形式来的;使用图片其实有不少问题,比如说放大失真,增加过多http 请求数(即使使用 CSS Sprite 合并图片也不见得有多好)。...CSS3有一个@font-face属性(不过据说 font-face 是CSS2 的产物),@font-face 的本意是用来在线加载自定义字体的(适合于英文字体),但后来这个 @font-face 被发扬光大...想要了解 @font-face 与 Web-font 请自行谷歌,在这里不再累赘——其实,Jeff 也不太了解 ╮(╯_╰)╭ Jeff 目前折腾的原创主题 Aevework 上面已经成功使用上了,不过由于兼容性问题...Fontell 使用方法 使用方法: 选择想要的图标,然后点击右上角的红色按钮下载 解压下载回来的 zip,把里面的文件上传到你的网站 下载回来的包有个 demo.html,这里可以看到相对应的类名(class...使用的话照着demo.html 用就可以了。 Fontell 高级使用技巧:选择所需的图标,下载前可以点击Customize Names 来自定义选择器名称,这样就可以充分满足个性化需求。

1.8K60

【CSS】CSS 文本样式 ② ( font 字体设置 | CSS 2.0手册使用 | font-weight 字体粗细设置 | font-style 字体斜体设置 | font 字体样式综合写法 )

" 中 , 可以找到该文档 ; 右侧的 语法 和 参数 中 , 详细的说明了 属性的作用 , 以及 属性值如何设置 ; 2、 搜索关键字查找文档 此外 , 还可以 CSS 2.0 手册的 搜索栏..., 搜索该属性 ; 二、 font-weight 字体粗细设置 ---- 1、 语法简介 HTML 中可以使用 b strong ( 推荐使用 ) 标签 , 实现 文本粗体显示 ; 如果 使用...标签 粗体显示 , 则可以使用 CSS 设置其 不加粗 ; CSS 中 , 可使用 font-weight 设置 字体粗细 ; font-weight 属性值设置 : normal : 默认不加粗样式...: 三、 font-style 字体斜体设置 ---- 1、 语法简介 HTML 中可以使用 i em ( 推荐使用 ) 标签 , 实现 文本斜体显示 ; 如果 使用 标签 斜体显示 , 则可以使用...CSS 设置其 不倾斜 ; CSS 中 , 可使用 font-style 设置 字体粗细 ; body { font-style:italic; } font-style 属性值设置 : normal

4.7K20

python font的处理

python3   编译器 pycharm 今天处理pygame的字体时遇到了一些问题,程序如下: import pygame.ftfont class Button(): def __init...= pygame.font.Font(r'fonts\freesansbold.ttf', 48) # 创建按钮的rect对象,并使其居中 self.rect = pygame.Rect...=pygame.font.Sysfont(None,48),但是编译后报错,错误原因如下: OSError: unable to read font file  在网上查找原因可能有两个,一个是字体文件....ttf损坏,但我重下了该字体文件替换了却还是会报错,另一个原因是路径出错,解决办法是将self.font=pygame.font.Sysfont(None,48)替换为self.font=pygame.font.Font...我的代码中,是我的这个项目的文件夹中新建了一个fonts文件夹,并将.ttf文件放入。 Sysfont,只需要字体文件的名字,Font需要字体文件的全目录。

1.5K20

HTML中使用JavaScript

标签相关属性 type属性 标签默认就是JavaScript代码,嵌入javascript脚本时,type属性可以省略 如果type属性的值,浏览器不认识,就不会执行其中的代码,所以可以<...网页 解析过程中,发现带有defer属性的元素 浏览器继续往下解析HTML网页,同时并行下载元素加载的外部脚本 浏览器完成解析HTML网页,此时再回过头执行已经下载完成的脚本...网页 解析过程中,发现带有async属性的标签 浏览器继续往下解析HTML网页,同时并行下载标签中的外部脚本 脚本下载完成,浏览器暂停解析HTML网页,开始执行下载的脚本...后面执行 在这段代码后面加载的脚本文件,会等b.ja执行完成后再执行 相关知识点总结 包含在标签内部的JavaScript代码,将被从上到下一次解析 无论以哪种方式嵌入代码,只要不存在...2、避免,DOM结构生成之前调用DOM节点,而产生错误

1.4K30

@font-face的作用

@font-face是用于在网页上加载自定义字体的CSS规则。它允许开发人员使用自己的字体文件来显示文本,而不仅限于浏览器默认提供的字体。...要使用@font-face规则,你需要提供字体文件的路径并为字体指定一个名称。...下面是一个使用@font-face的示例:css@font-face { font-family: MyCustomFont; src: url(path/to/font.woff);}body {...然后,body元素中,我们将字体应用于文本。当浏览器解析CSS时,它会下载字体文件并应用于相应的元素或选择器,以便使用自定义字体来呈现文本内容。...请注意,使用自定义字体时,你需要确保你有合法的字体许可证,并且使用字体文件之前仔细阅读并遵守任何相关的版权和许可条款。

38120
领券