EM帮助中心插件

253 / / MYSQL常用语句

根据条件求和（根据时间戳转月份求和）

SELECT SUM( money )
FROM `dr_member_cashlog`
WHERE FROM_UNIXTIME( paytime, '%Y-%m' ) = '2024-04'

384 / / 免费引入商用黑体字体系列整理及 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/#/font

2.引入字体方式

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 上大放异彩。

318 / / jQuery实现图片懒加载

当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。

通俗一点：

1、就是创建一个自定义属性data-src存放真正需要显示的图片路径，而img自带的src放一张大小为1 * 1px的图片路径。
2、当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-src的值赋给src。 ps：自定义属性可以取任何名字

HTML代码如下：

<img data-src="真正要加载的图片地址" src="这个是占位图,如等待加载图" >

jq代码：

<script>

start()

$__(window).on('scroll', function(){
    start()
})

function start(){
    $('.pics_content img').not('[data-isLoaded]').each(function(){
        var $node = $(this)
        if( isShow($node) ){
            loadImg($node)
        }
    })
}

//判断一个元素是不是出现在窗口(视野)
function isShow($node){
    return $node.offset().top <= $(window).height() + $(window).scrollTop()
}

//加载图片
function loadImg($img){
    $img.attr('src', $img.attr('data-src')) //把data-src的值 赋值给src
    $img.attr('data-isLoaded', 1)//已加载的图片做标记
}
</script>

271 / / mysql 修改字段值等于另一字段值或另一字段值的拼接

update  表名 set `字段`=CONCAT(name,'11',keyword);

529 / / 在微信浏览器字体被调大导致页面错乱的解决办法

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 });
            });
        }
})();

314 / / 锚点定位—如何设置锚点居页面顶部距离，锚点定位并距离顶部一定偏移

锚点是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。

使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。

创建到命名锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命名锚记的链接。

1.普通锚点

<a href="#aboutmao" >锚点链接</a>
...
<div id="aboutmao">锚点跳转到这里</div>

这些是可以实现完美的锚点功能，但是如果我网页的header一直固定在顶部，这是锚点链接过去就需要居顶一个header的距离，不然链接过去一部风内容会被header遮挡。

这个问题用js解决是最方便的：

<a href="javascript:;" class="aboutmao">关于我们</a>

<div id="about">锚点跳转到这里</div>

<script>
    $(document).ready(function () {

      function topMao(target) {
        $('html, body').animate({
          scrollTop: $(target).offset().top - $('.topnav').height() //顶部固定导航
        }, 500); //130为锚点到距顶部的距离，500为执行时间
        return false;
      }

      $('.aboutmao').click(function () {
        topMao('#about');
      })

    })
</script>

锚点的点击事件，然后获取此 id 距离网页顶端的距离，减去header的高度，最后用window.scrollTo直接滑动到锚点位置。已在ie10+、火狐、谷歌浏览器上测试ok。

302 / / 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;

268 / / 网站搬家后，会有好多附件地址不变，附一个SQL语句，应用于phpmyadmin，批量修改

UPDATE `表名` SET `字段名` = REPLACE(`字段名`,'旧域名地址','新域名地址');

285 / / 宝塔申请部署TrustAsia免费SSL证书https访问

宝塔现在一个账号只能申请3个SSL证书，超过后无法申请，只能自己申请https，方法如下：
首先打开https://freessl.cn/，在首页输入你的域名，登录账号.

根据给出的信息，到域名解析商添加 CNAME 解析记录

回到freessl.cn，检查解析记录是否已经正确添加，并记录第三步中给出的命令

连接到你的服务器，在ssh终端中执行下面脚本。建议将邮箱换成你自己的：

curl https://get.acme.sh | sh -s email=my@example.com

然后关闭ssh窗口并重新连接服务器，执行刚刚在freessl.cn第三步中记录的命令

出现如图代表证书已经成功申请

打开宝塔面板中你要部署ssl的网站，随便部署一个证书上去（域名不需要相匹配，过期的证书也可以，或者用下面的证书）

证书：

私钥：

打开网站的配置文件，记录下大约在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"

使用浏览器打开你的网站就可以看到效果了，享受吧！

291 / / PHP截取字符串函数

在PHP中，有多种方法可以截取字符串。以下是其中最常见的三种方法：

一：substr(string,start,length)英文 / mb_substr()中文

string 必需。规定要返回其中一部分的字符串。
start
必需。规定在字符串的何处开始。
正数 - 在字符串的指定位置开始
负数 - 在从字符串结尾开始的指定位置开始
0 - 在字符串中的第一个字符处开始
length
可选。规定被返回字符串的长度。默认是直到字符串的结尾。
正数 - 从 start 参数所在的位置返回的长度
负数 - 从字符串末端返回的长度

<?php
echo substr("Hello world",10)."<br>";
echo substr("Hello world",1)."<br>";
echo substr("Hello world",3)."<br>";
echo substr("Hello world",7)."<br>";

echo substr("Hello world",-1)."<br>";
echo substr("Hello world",-10)."<br>";
echo substr("Hello world",-8)."<br>";
echo substr("Hello world",-4)."<br>";
?>
//运行结果：
d
ello world
lo world
orld
d
ello world
lo world
orld

二：mb_strimwidth()

<?php
echo mb_strimwidth("Hello World", 0, 10, "...");
// 输出 Hello W...
?>