-
590
/
/
免费引入商用黑体字体系列整理及 CSS 字体引入亲妈式教程
由于微软雅黑的设计太过老旧,所以很多网站在设置font-family字体家族时,都会首先引入苹果的苹方字体(PingFang SC)。一来为了照顾 MAC,二来可以改善 Windows 上显示效果(已安装苹方字体的前提)。现在,一些厂商会在官网上引入自己研发的字体。感谢各大厂商没有禁止 woff 字体文件跨域使用,可以让我们白嫖,因为你们的字体是真的漂亮,并且以下字体可以免费商用。
1.字体列表及引用链接
鸿蒙字体 - B 站
400 字重 CSS://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css 500 字重 CSS://s1.hdslb.com/bfs/static/jinkela/long/font/medium.css华康金刚黑 - 字节跳动
字重 CSS://fonts.bytedance.com/dfd/api/v1/css?family=DFPKingGothicGB-Regular&display=swap 500 字重 CSS://fonts.bytedance.com/dfd/api/v1/css?family=DFPKingGothicGB-medium&display=swap思源黑体 - 谷歌字体库
可变字重 CSS://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap 该 CSS 可以通过链接控制字重,比如我只想要 400 字重,那么在链接@400;500;700 部分修改为@400,增加同理。小米字体 - 小米 MIUI 官网
可变字重 CSS://font.sec.miui.com/font/css?family=MiSans:400,500,700:Chinese_Simplify,Latin&display=swap 该 CSS 可以通过链接控制字重,比如我只想要 400 字重, 那么在链接 MiSans:400,500,700 部分修改为 MiSans:400,增加同理。OPPO 字体 - OPPO 网站
400 字重 WOFF2://www.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Regular.woff2 500 字重 WOFF2://www.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Medium.woff2 该部分为 woff2 字体文件与上述 css 引入方式不同,具体看下述说明。OPPO 字体 - MasterGo 网站
400 字重 WOFF2://static.mastergo.com/static/font/OPPOSans/OPPOSans-Regular.woff2 500 字重 WOFF2://static.mastergo.com/static/font/OPPOSans/OPPOSans-Medium.woff2 600 字重 WOFF2://static.mastergo.com/static/font/OPPOSans/OPPOSans-Bold.woff2 700 字重 WOFF2://static.mastergo.com/static/font/OPPOSans/OPPOSans-Heavy.woff2 该部分为 woff2 字体文件与上述 css 引入方式不同,具体看下述说明。阿里巴巴普惠体 - 阿里巴巴网站
该部分查看 https://fonts.alibabagroup.com/#/font2.引入字体方式
CSS 文件
方式一、在 html 中直接引入: <link rel='stylesheet' href='.css'> 方式二、在 css 中引入: @import url('.css');woff 文件
在 css 中引入 @font-face { font-family: OPPOSans; //定义字体名称 font-weight: 400; //定义字重 font-display: swap; src:url('.woff2') format('woff2'); //字体链接 }上述字体列表链接中,若是 css 链接可直接引用,若是 woff 字体链接需在你的 css 文件中引入。
3.引用字体方式
引入字体文件后,在需要使用的元素处设定 css 属性 font-family 中输入字体名称即可
4.字重说明
浏览器默认字重 400,假如对标题想要使用粗体该如何操作呢?在设定字体字重时会有两种不同的呈现效果方式。
情况一、对不同字重文件使用相同字体名称引入
例如下述两个不同字重文件都使用 OPPO-Sans 名称: @font-face { font-family: OPPO-Sans; font-weight: 400; font-display: swap; src: url(//static.mastergo.com/static/font/OPPOSans/OPPOSans-Regular.woff2) format('woff2'); } @font-face { font-family: OPPO-Sans; font-weight: 500; font-display: swap; src: url(//static.mastergo.com/static/font/OPPOSans/OPPOSans-Medium.woff2) format('woff2'); }那么在对 h1 这个部分引用时,如何使用字重 500 的字体呢?只需要设定 font-weight 属性为 500 即可。即下述:
普通元素在引入 400 字重时 div { font-weight: 400; } 标题元素在引入 500 字重时 h1 { font-weight: 500; }情况二、对不同字重文件使用不同字体名称引入
例如下述两个不同字重文件使用不同字体名称: @font-face { font-family: OPPO-Sans-Regular; font-weight: 400; font-display: swap; src: url(//static.mastergo.com/static/font/OPPOSans/OPPOSans-Regular.woff2) format('woff2'); } @font-face { font-family: OPPO-Sans-Medium; font-weight: 500; font-display: swap; src: url(//static.mastergo.com/static/font/OPPOSans/OPPOSans-Medium.woff2) format('woff2'); }那么在引用时,只能使用当初设定该字重的字体名称。即下述:
普通元素在引入 400 字重时 div { font-family: OPPO-Sans-Regular; } 标题元素在引入 500 字重时 h1 { font-family: OPPO-Sans-Medium; }5.font-display: swap 说明
你会发现很多引入字体的文件都会标注这个属性,它的作用是在没有加载出字体前,优先加载本地字体进行渲染,避免网页出现空屏。
6.字体文件格式
本文一律使用 woff2 字体格式,在如今浏览器趋于 Chromium 内核的潮流下,作为个人站点可以不需要考虑旧版本浏览器的兼容性。
7.结语
就 windows 上的清晰效果而言,无论你使用何种字体,都没有在 windows 经过特殊优化的微软雅黑更好。如今当你在 windows 安装苹方字体后,你会发现苹方字体的显示效果也十分漂亮,这是因为科技的进步使得显示器分辨率越来越清晰。所以就算使用没有在 Windows 经过特殊优化的字体,也会在 Windows 上大放异彩。
-
436
/
/
mysql 修改字段值等于另一字段值或另一字段值的拼接
update 表名 set `字段`=CONCAT(name,'11',keyword); -
749
/
/
在微信浏览器字体被调大导致页面错乱的解决办法
iOS的解决方案是覆盖掉微信的样式:
body { /* IOS禁止微信调整字体大小 */ -webkit-text-size-adjust: 100% !important; }安卓的解决方案是通过 WeixinJSBridge 对象将网页的字体大小设置为默认大小,并且重写设置字体大小的方法,让用户不能在该网页下设置字体大小:
(function () { if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") { handleFontSize(); } else { if (document.addEventListener) { document.addEventListener("WeixinJSBridgeReady", handleFontSize, false); } else if (document.attachEvent) { document.attachEvent("WeixinJSBridgeReady", handleFontSize); document.attachEvent("onWeixinJSBridgeReady", handleFontSize); } } function handleFontSize() { WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 }); WeixinJSBridge.on('menu:setfont', function () { WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 }); }); } })(); (function() { if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") { handleFontSize(); } else { if (document.addEventListener) { document.addEventListener("WeixinJSBridgeReady", handleFontSize, false); } else if (document.attachEvent) { document.attachEvent("WeixinJSBridgeReady", handleFontSize); document.attachEvent("onWeixinJSBridgeReady", handleFontSize); } } function handleFontSize() { // 设置网页字体为默认大小 WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 }); // 重写设置网页字体大小的事件 WeixinJSBridge.on('menu:setfont', function() { WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 }); }); } })(); -
469
/
/
mysql修改记录时update操作 字段=字段+字符串
在有些场景下,我们需要对我们的varchar类型的字段做修改,而修改的结果为两个字段的拼接或者一个字段+字符串的拼接。
UPDATE `dr_1_blog` SET `url`=concat('abcd',id) WHERE id='1'补充:mysql中使用update同时更新多个字段,包括select查询
错误尝试:
update 表名 set(字段1,字段2,字段3,...) = (select 数值1,数值2,数值3,...) where 条件正确方式:
# 不使用select情况 UPDATE OldData o, NewData n SET o.name = n.name, o.address = n.address where n.nid=234 and o.id=123; # 使用select情况 UPDATE OldData o, (select name, address from NewData where id = 123) n SET o.name = n.name, o.address = n.address where n.nid=234; -
413
/
/
网站搬家后,会有好多附件地址不变,附一个SQL语句,应用于phpmyadmin,批量修改
UPDATE `表名` SET `字段名` = REPLACE(`字段名`,'旧域名地址','新域名地址'); -
457
/
/
宝塔申请部署TrustAsia免费SSL证书https访问
宝塔现在一个账号只能申请3个SSL证书,超过后无法申请,只能自己申请https,方法如下:
首先打开https://freessl.cn/,在首页输入你的域名,登录账号.回到freessl.cn,检查解析记录是否已经正确添加,并记录第三步中给出的命令

连接到你的服务器,在ssh终端中执行下面脚本。建议将邮箱换成你自己的:
curl https://get.acme.sh | sh -s email=my@example.com然后 关闭ssh窗口并重新连接服务器 ,执行刚刚在freessl.cn第三步中记录的命令

出现如图代表证书已经成功申请
打开宝塔面板中你要部署ssl的网站,随便部署一个证书上去(域名不需要相匹配,过期的证书也可以,或者用下面的证书)
证书:
-----BEGIN CERTIFICATE----- MIID3DCCAsSgAwIBAgIRAPJFqahnl0A/ijcJq5PgMVQwDQYJKoZIhvcNAQELBQAw XjELMAkGA1UEBhMCQ04xDjAMBgNVBAoTBU15U1NMMSswKQYDVQQLEyJNeVNTTCBU ZXN0IFJTQSAtIEZvciB0ZXN0IHVzZSBvbmx5MRIwEAYDVQQDEwlNeVNTTC5jb20w HhcNMjIwNDE0MDY0OTM1WhcNMjMwNDE0MDY0OTM1WjAdMQswCQYDVQQGEwJDTjEO MAwGA1UEAxMFYnQuY24wggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQC9 3sUocsPsVdK6oMU689SO7L0Gjg6Z8QBqwqdP9lSKU6A5m/+LJ7qqQD1VcjAKEjTo fBpmzfE+uvR51nh7qiB2IWHpF1JCTYPnriW/OgsdlPlutaTt8/vQuDBgFXj9C0oR JUWTt9xNY0gIGzfEPQBeu7rer7M/un/BoIIUXtiQYeiTQMkuMZ6JZVFy243OJv8b aulNbSeC290YdaxtuhCWjjYELGW1jxlwmDOT5EDaomYcg3CtRFhe9XVAV4ccf1HO 0hig0bfdeKQnv51R1XFCxdMSF/wAA2YI40Hb9BiTvfDXDg+ogxbd+Y3McMlELN70 nFS3i2D8zAHpOZ2JiWLJAgMBAAGjgdUwgdIwDgYDVR0PAQH/BAQDAgWgMB0GA1Ud JQQWMBQGCCsGAQUFBwMBBggrBgEFBQcDAjAfBgNVHSMEGDAWgBQogSYF0TQaP8Fz D7uTzxUcPwO/fzBjBggrBgEFBQcBAQRXMFUwIQYIKwYBBQUHMAGGFWh0dHA6Ly9v Y3NwLm15c3NsLmNvbTAwBggrBgEFBQcwAoYkaHR0cDovL2NhLm15c3NsLmNvbS9t eXNzbHRlc3Ryc2EuY3J0MBsGA1UdEQQUMBKCCXd3dy5idC5jboIFYnQuY24wDQYJ KoZIhvcNAQELBQADggEBAJpeC8oeH7Omyr4DauGE3JLkfLDjgs0iCxi7pgRhn0Rn TxlYB8Rc0MAAUeoQAPgL+7Z1AYdxAhZbDz7u4QFjuw0DoJzWTTUUs8U43hA4mDhK epGLBlS6KctQeiNiM4wdcGtEZkGzb1J3Lvpm4U2yUQYaYl/IlkzpxRcdoN4aKrEJ b4qieVcQuA5jest11jx+FfF5CzEV03kjwSCSZDfYf+xobr/mTOnhXa6hEutEGE9i Rd7z7grCRUXl4M0UNjei7XJGmMFxM8H0yZWIE1ji+86FziLySEZ7IUX+mL15bic9 CCzbqPEgeo5vjwW3iOXaDdj2Ofv7UUmiTbCJpj5nx8g= -----END CERTIFICATE-----私钥:
-----BEGIN RSA PRIVATE KEY----- MIIEpQIBAAKCAQEAvd7FKHLD7FXSuqDFOvPUjuy9Bo4OmfEAasKnT/ZUilOgOZv/ iye6qkA9VXIwChI06HwaZs3xPrr0edZ4e6ogdiFh6RdSQk2D564lvzoLHZT5brWk 7fP70LgwYBV4/QtKESVFk7fcTWNICBs3xD0AXru63q+zP7p/waCCFF7YkGHok0DJ LjGeiWVRctuNzib/G2rpTW0ngtvdGHWsbboQlo42BCxltY8ZcJgzk+RA2qJmHINw rURYXvV1QFeHHH9RztIYoNG33XikJ7+dUdVxQsXTEhf8AANmCONB2/QYk73w1w4P qIMW3fmNzHDJRCze9JxUt4tg/MwB6TmdiYliyQIDAQABAoIBAQCNyUmZxvogBoby 7xPZzjOw94DA4FxvANW649llkSHYmlJQMvpFxElU0dv7buYI30e7RNHCa4/3tEzU nyAh2Q2cqZkgI1Y+RPx3ikiN4J5kXNdXoTWkrEojtygI2IAdFs0cuKSYhvhwoe8s fobKeHNKSw5lNPe6Y178DQyWga1fQzOUivQsJi3CGnWSBoVFDAqUDEJLL0BQpww5 Ktr5nksLo2GT7zLkR/D9Aj8c17eqBDT58jqZsYHnEzNl4q9+2z/66uIuRmpQmgpb AeWyl2UoaH9h0LfiRZZ8EpTbKitabXWIt6phSdvgguUQXn6tGHIWn5GLD8dqRLok MoPm1m1xAoGBAMo3VcEI1PriSU/+uyEC8lOvK+f7a01gG0J+0bcKn7hVzm9/Eh6l ujW+4ywKZFjeWqjoXYGHy+r/g8iXx2mGb1aRRusF5NzOBjeGAykuqciTTCerINxp XVoPr6u3bCwnRzigjh9qRQn0hji+bR8YPpY+DYDZKLzpMQ8pi+li2JaXAoGBAPBe 0C7hU7dBtmxkOWlSncVOCd4xS6xQSRAbGXbxhejNyEOay9y1wv49wK7o2sD0NFPH ibydx8rglB9lzksQ4/F/5fW2VP1BLjKwXEOnpya1jiz9orAXjRS7Uy0ePPDwp5jm Wy4xX4WmRXWi+LoIqIIXJ0akRgveJRAJc56NCV2fAoGAKVr1u7utqv16VtTWumKa 4ohxp0jg4fskuA2toAyZK57I0D6hmwjzsygt14TsjswyqFaVQPdfudi1v+Fik+89 d+vQICKdcpbj6JkMrnBvoqiVK4uw9cLKp6+Lkse5ZLJHu4oCZuRZ6DZM+O/g6zoP GrToGBDRZwkd0mcBySJA/1MCgYEApkDd+17seVchJu1XbEqxRzPHzYAJGCDbuCEW RtecyD304xWhJYIuYY0yxYfXLhh6TOw5j1UOSHt22BShT/hZwMK2unGnbRd1Lagf 2MeP7E0tDl9L9EIF2a4LRKyid//r2+yQam3J5PXxGwFiycGNU5VSHCEpNbIrrmDr MGHadX8CgYEAi8kqHDAtZVEk7OpvV6zp16MmEWJiU+cyrW7BPHCDdt1231AVa/x+ fQGwo8T7s1xeQ/ojxJ+O4gCZD13WOe83kdbtIPSBt6Q2SUJJFnndxrZO30yMmRoQ L7jnSMNrzZ7rpv47QaIBTxe4E44hMcjgzaTnW/rvcyNKGIkKIKqm7j0= -----END RSA PRIVATE KEY-----打开网站的配置文件,记录下大约在11行处
ssl_certificate ssl_certificate_key进入服务器终端,执行下面命令(本例中web环境为nginx)如果你的为其他环境请参考https://blog.freessl.cn/acme-quick-start/。
- 1,将example.com替换成你的域名#
- 2,将fullchain-file后面的路径替换成你刚刚查到的ssl_certificate路径
- 3,将key-file- 后面的路径替换成你刚刚查到的ssl_certificate_key路径
acme.sh --install-cert -d chenziwen.cn \ --key-file /www/server/panel/vhost/cert/chenziwen.cn/privkey.pem \ --fullchain-file /www/server/panel/vhost/cert/chenziwen.cn/fullchain.pem \ --reloadcmd "/etc/init.d/nginx reload"使用浏览器打开你的网站就可以看到效果了,享受吧!
-
333
/
/
宝塔{CORS}跨域设置
add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; -
398
/
/
emlog 判断某个插件是否激活
$DB = Database::getInstance(); $sql = $DB->query("SELECT * FROM `" . DB_PREFIX . "options` WHERE `option_value` like '%插件名称%'"); if ($DB->num_rows($sql) > 0) { echo '激活'; } else { echo '未激活'; } -
313
/
/
讯睿常用函数
dr_member_info(uid); //获取用户数据 -
397
/
/
EMLOG插件储存与读取数据 存储数据
<?php $plugin_storage = Storage::getInstance('plugin_name');//使用插件的英文名称初始化一个存储实例 $plugin_storage->setValue('key', 'xxxxxx'); // 设置key的值为 xxxxxx 读取数据 $plugin_storage = Storage::getInstance('plugin_name'); //使用插件的英文名称初始化一个存储实例 $ak = $plugin_storage->getValue('key'); // 读取key值 ?>



