当前位置:首页 > web实践 > 正文内容

网站常见引用

唐朝2年前 (2024-05-11)web实践3030

一、ico图标

ico图标,又名favicon,即Favorites Icon的缩写,是指显示在浏览器收藏夹、地址栏和标签标题前面的个性化图标。

上传一张图片,可以是ico格式。也可以是svg或png等格式。然后在页面引用这个图片

在<head>模块引用方法,通常位于<title>标签下方

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" >

如网站代码里面没有写这一行代码,有些浏览器默认会自动调用根目录的favicon.ico文件显示在对应位置。

二、font图标字体引用

包含了一系列矢量图标,可以轻松地通过 CSS 进行调用和使用,它可以被定制大小、颜色、阴影等。

在《阿里巴巴矢量图标库》的资源管理界面,选择《我的项目》,点击新建项目。

然后上传自己的设计的图标或者在《素材库》里添加图片。

然后我的项目,选择创建的项目,点击《fontclass》,然后点击《查看在线链接》。

在<head>模块引用方法,通常位于<title>标签下方

<link rel="stylesheet" href="你复制的链接">

在页面需要的位置,输入以下代码

<i class="iconfont icon-xxx"></i>

然后把《icon-xxx》替换成你项目对应图标下方的《复制代码》里的代码。

三、fonts字体引用

当默认主题无法满足你的需求,可以使用自定义字体嵌入到你的网页中。

本地版本

案例素材:

fonts字体

引用案例

// 在css文件里添加代码
@font-face {
    font-family: HarmonyOS_Sans;
    font-style: normal;
    font-display: swap;
    src: url(fonts/HarmonyOS_Sans.subset.woff2) format('woff2')
}

然后在需要显示这个字体的css属性上,添加属性

font-family: HarmonyOS_Sans;

远程版本

为什么用远程字体?本地储存字体加载起来很慢,自己服务器慢的话那就可想而知了,所以我们可以利用其他网站储存的字体加速,如下面的链接,看链接就知道这是小米官网,放心使用~

<link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,700:MiSans" />

添加调用字体到全局css

* {font-family: MiSans}

    文档如有描述不清楚、错误或者过时的地方,欢迎留言指出。

    文档、教程内容会不定时更新,转载请标明原帖链接,以免让过时的教程流入网络。

    分享给朋友:

    “网站常见引用” 的相关文章

    倒计时跳转URL

    倒计时跳转URL

    倒计时跳转URL 是一种常见的网页交互技术,它允许网页在设定的时间结束后自动导航至另一个预设的URL地址。这种技术常见于网页广告展示、用户操作提示、页面过渡等待等情况。开发步骤1、初始化HTML基础框架使用!DOCTYPE html声明文档类型,并通过html:5的快捷代码创建HTML5的基础结,然...

    团队介绍模块制作

    团队介绍模块制作

    以结构化、直观的方式展示团队成员的基本信息,包括头像、姓名、职务及简要工作经历等。后续可以通过设置链接,用户可以方便地访问成员的详细资料,增强了页面的信息传递效率和交互性。同时,模块设计兼顾了响应式布局,确保在各类设备上的良好用户体验。一、构造HTML结构使用!DOCTYPE html声明文档类型,...

    h5网站添加统计代码

    1、进入百度统计官方网站 https://tongji.baidu.com/2、登录账户3、在控制面板界面,点击《使用配置》4、在《使用配置》左侧导航的《网站列表》界面,点击《添加站点》5、输入以下信息网站域名: 格式 b9b31053.idc.wod.xyz网站首页:格式&nb...

    虚拟主机安装zblog程序

    虚拟主机安装zblog程序

    本教程用于指导怎么通过虚拟主题全新安装一个zblogphp站点,数据库采用mysql。准备工作1、虚拟主机的程序语言是php,版本推荐选8.0以上版本,如没有8.0及其以上版本则选择当前最高的版本。2、虚拟主机有对应的mysql数据库信息。3、zblog的一键安装包。https://update.z...

    如何在zblog网站引用第三方视频

    如何在zblog网站引用第三方视频

    启用插件后,在文章编辑页面右侧栏中找到“添加 iframe 视频”按钮,点击后弹出对话框,在对话框中粘贴复制好的 iframe 代码,选择要展示的宽高比例、以及是否进行 HTML5 格式化,点击“插入”即可。如果无法预览视频,请到设置中添加对应的 CSP 域名。展示宽高比例是指 iframe 的宽高...

    zblog的伪静态怎么开启

    zblog的伪静态怎么开启

    伪静态可以自定义URL,简洁明了的URL结构让用户更容易理解和记忆,提升了用户的浏览体验。本案例采用的是nginx环境。操作步骤如下:1、在应用中心找到《静态管理中心》插件并开启开启;2、点击《静态管理中心》的管理配置按钮;3、在《配置界面》的静态化选项-使用伪静态前必须确认主机是否支持处,选择伪静...