html5自定义字体

        我在做移动端Web开发的时候,遇到过设计师设计的特殊字体,而且很容易用肉眼识别的一种字体-方正

轻刻简体,平时他们使用方正兰亭黑我就用默认的字体Helvetica显示,还凑合,但是这种字体,很难用默认字

体取代,于是想着使用自定义字体来满足设计师的要求。

       先看一眼效果:

	

       接下来介绍如何自定义字体。

       自定义字体思路很简单,先定义一个字体(myFirstFont),同时这里还需要指定一个字体文件,就是设计师

在设计时的字体文件,可以向设计师索要(既然人家能使用这样的字体,人家机器上肯定有这种字体文件),也

可以在网上搜索下载,然后对需要使用特殊字体的文字使用该字体(font-family:'myFirstFont')。

定义字体的语法:   

@font-face{
    font-family:'myFirstFont';
    src:url('./fzqksimple.TTF') format('truetype');
}

使用字体:  

.content{font-family:'myFirstFont';}
	 

     展示的效果即和文章开头的效果一样。

	

        题外话:因为涉及到字体文件需要加载,而且一般字体文件会相对较大,我这个自定义字体文件有3M多。为了流量和加载速度

考虑,可以让设计师尽量不要使用特殊字体。

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,可以编译到 iOS、Android、H5、以及各种小程序等多个平台。在使用 uni-app 开发时,经常会遇到需要校验输入框(input)内容的场景,包括校验特殊字符。 对于 uni-app 的 input 特殊字符校验,你可以采取以下几种方法: 1. 自定义校验方法:编写 JavaScript 函数来校验输入的字符串是否包含不允许的特殊字符。例如,如果你想禁止输入特殊字符,可以使用正则表达式来匹配这些字符。 ```javascript function checkSpecialChar(value) { // 正则表达式中,特殊字符通常是指非字母、非数字以及非下划线的字符 // 这里以禁止大部分特殊字符为例,保留部分特殊字符如空格和标点 const specialCharPattern = /[\(\)\{\}\[\]\;\:\'\"\,\<\>\.\?\!\-\_\\\/\|]/g; return !specialCharPattern.test(value); } // 使用示例 let inputValue = '这是一个测试input'; console.log(checkSpecialChar(inputValue)); // 应该返回true,因为没有特殊字符 ``` 2. 使用 HTML5 输入类型:利用 HTML5 的输入类型属性来限制输入。例如,如果你想限制用户只能输入数字,可以使用 `type="number"`。 ```html <template> <view> <input type="text" v-model="inputValue" placeholder="输入文本,限制特殊字符" /> </view> </template> <script> export default { data() { return { inputValue: '' } }, methods: { onInput(value) { // 在这里可以进行特殊字符校验 if (!checkSpecialChar(value)) { // 如果校验不通过,可以在这里处理,比如提示用户或者清空特殊字符 this.inputValue = value.replace(/[\(\)\{\}\[\]\;\:\'\"\,\<\>\.\?\!\-\_\\\/\|]/g, ''); } } } } </script> ``` 3. 结合 uni-app API 和事件:在uni-app中,可以在输入框的 `input` 事件中进行校验,结合自定义的方法和 HTML5 属性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

luffy5459

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值