在使用 Web 字体时，我们可以采用以下一些优化方案：



## 使用适当的字体格式：

Web 字体通常以 TrueType（TTF）或 OpenType（OTF）格式提供。TTF 字体文件较小，加载更快，但 OTF 格式支持更多的字形和格式，使得文本在不同的浏览器和操作系统上都能有相同的呈现效果。

## 使用字体服务：

字体服务如 Google Fonts 和 Typekit 提供了大量的 Web 字体，用户访问网站时可以直接从这些服务获取字体。字体服务允许网页设计者在不增加网页负担的情况下使用更多的字体，同时能够保证字体的质量和流畅性。

## 字体预加载：

在加载网页时，浏览器默认不会预加载字体，因此当字体首次出现时需要进行下载，从而造成了加载时间的延长。为了避免这种情况，我们可以通过在 HTML 中添加 preload 标签来预加载字体，这样在用户浏览到使用该字体的内容之前就已经下载好了。

## 字体子集化：

下载整个字体文件会增加带宽和加载时间。为了减少这种情况，我们可以通过字体子集化的方式，只下载使用到的字形，可以减少下载字体文件的大小。

## 合理的字体选择：

选择合适的字体，对保证网页内容的可读性和美观性非常重要。一般来说，应该选择易于阅读、在不同设备和浏览器中呈现效果良好的字体。同时，也要避免使用太多不同的字体，以免影响页面的整体风格和视觉感受。

web字体使用优化方案

## 创建光标
可以使用CSS的@keyframes规则来创建光标闪烁动画。



### code

```html
<div class="custom-cursor"></div>
```

```css
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
  animation: blink 0.5s infinite alternate;
  z-index: 9999;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
```

在这个例子中，我们创建了一个名为“custom-cursor”的div元素，并将其定位在屏幕的左上角。我们给它一个黑色的背景和圆形边框，并使用border-radius属性将其圆形化。

我们然后使用animation属性将“blink”动画应用于该元素。在“blink”动画中，我们使用@keyframes规则定义了光标的闪烁效果。在0％时，光标完全不透明；在100％时，光标完全透明。

最后，我们将z-index属性设置为9999，以确保光标始终显示在其他元素的顶部。

请注意，此代码将创建一个简单的光标，但您可以根据需要进行更改和自定义。

## 当然手写光标需要注意

1. 当没有实际值，只有placeholder值，需要光标在前
2. 当有实际值，光标需要在值后2px左右

css手写光标

## 网页浏览器如何用js全屏

> 要使用JavaScript将平板浏览器全屏，可以使用Web API中的全屏API。下面是一些基本的JavaScript代码示例，可以将平板浏览器全屏：

```js
// 获取要全屏的元素
var elem = document.documentElement;

// 如果该元素支持全屏，则尝试进入全屏模式
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
  elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
  elem.msRequestFullscreen();
}
````

> 这段代码将获取文档的根元素，并尝试通过调用 requestFullscreen() 方法将其全屏。请注意，此代码在不同的浏览器中可能会略有不同，因为不同的浏览器可能使用不同的前缀（例如，moz，webkit等）来访问全屏API。

## js全屏事件手动关闭后再次点击全屏失效的原因

1. 当手动关闭全屏后，再次调用 requestFullscreen() 方法无法将文档全屏的原因通常是浏览器的安全策略。
 
    > **浏览器不允许JavaScript在没有用户明确许可的情况下将文档重新全屏，因为这可能会导致用户体验受损或滥用。**

2. 在大多数浏览器中，当用户手动退出全屏模式时，浏览器会将文档从全屏模式中退出，并将 fullscreenElement 属性设置为 null。因此，如果您要在用户退出全屏模式后重新启用全屏模式，则必须等待用户明确请求并允许重新全屏。

3. 您可以通过在全屏变化事件 fullscreenchange 的处理程序中检查 fullscreenElement 属性的值，来确定文档当前是否全屏。如果 fullscreenElement 属性为 null，则文档不再处于全屏模式，此时可以再次尝试调用 requestFullscreen() 方法。

以下是示例代码：

```js
// 获取要全屏的元素
var elem = document.documentElement;

// 如果该元素支持全屏，则尝试进入全屏模式
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
  elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
  elem.msRequestFullscreen();
}

// 监听全屏变化事件
document.addEventListener('fullscreenchange', function() {
  // 如果文档不再全屏，则重新尝试进入全屏模式
  if (!document.fullscreenElement) {
    elem.requestFullscreen();
  }
});
```

> 在这个例子中，当用户退出全屏模式后，fullscreenchange 事件将被触发，事件处理程序将检查 fullscreenElement 属性的值并重新尝试进入全屏模式。请注意，在某些浏览器中，fullscreenchange 事件可能被称为 webkitfullscreenchange 或其他名称。

### 测试失效场景

1. 平板ipad

## 对于js全屏失效，再次触发全屏问题分析

> 如果您尝试调用 requestFullscreen() 方法时没有效果，并且您已经检查了 fullscreenchange 事件并等待文档退出全屏模式后再次尝试全屏，您可能需要考虑使用一个更具体的解决方案，以克服这个问题。

以下是一些可能会导致 requestFullscreen() 失败的常见原因，以及如何解决它们：

1. 元素不可见：全屏模式只适用于可见元素。如果您的元素处于隐藏或不可见状态，则调用 requestFullscreen() 方法将无法生效。您可以在调用 requestFullscreen() 方法之前确保元素是可见的，或者您可以在元素变得可见时再次尝试全屏。

2. 浏览器策略：在某些浏览器中，全屏API需要用户的明确许可，或者需要在用户与页面进行交互之前调用。例如，在Chrome中，如果您的代码不是作为事件处理程序（例如，点击事件）的一部分调用 requestFullscreen()，则浏览器可能会阻止该调用。您可以尝试将 requestFullscreen() 方法包装在一个事件处理程序中，以确保它是作为事件的一部分调用。

3. 限制条件：某些浏览器可能会对全屏模式应用一些限制，例如不允许在非用户交互事件（例如 scroll 事件）中调用 requestFullscreen()。您可以尝试在用户与页面进行交互时再次尝试全屏，或者查看浏览器文档以了解全屏API的限制条件。

4. 浏览器兼容性：不同浏览器可能具有不同的全屏API实现，例如某些浏览器需要使用浏览器特定的前缀（例如 webkit）来访问API。您可以尝试在不同的浏览器中测试您的代码，并查看浏览器文档以了解如何正确访问全屏API。

总之，解决 requestFullscreen() 失败的问题需要对代码和浏览器的细节进行更详细的检查和测试。如果您已经尝试了上述解决方案，但仍无法解决问题，请尝试将您的代码和浏览器信息提供给开发人员社区以获取更具体的帮助。

js全屏相关开发内容

电脑群控手机技术是指一种可以通过电脑控制多个手机的技术，通常用于测试、演示、监控等场景中。




# 1.电脑群控手机技术

具体的实现技术有多种，下面列举了一些常用的技术：

### ADB（Android Debug Bridge）
这是一种Android平台上的调试工具，可以通过USB连接将Android设备连接到电脑上，从而实现控制和管理。通过ADB，可以使用命令行或脚本控制多个设备的操作。

### VNC（Virtual Network Computing）
这是一种远程控制技术，可以通过网络将多个设备连接起来，从而实现远程控制。通过VNC，可以在电脑上显示多个手机屏幕，并通过鼠标、键盘等进行控制。

### APPium
这是一种开源的自动化测试框架，可以用于Android和iOS平台上的测试。通过APPium，可以编写脚本控制多个设备的操作，从而实现批量测试。

### TeamViewer
这是一种远程控制软件，可以在电脑和手机之间进行远程连接，从而实现远程控制。通过TeamViewer，可以在电脑上显示多个手机屏幕，并通过鼠标、键盘等进行


# 2.远程电脑开关机

要控制远程电脑的开关机，您需要具有管理员权限，并且需要通过网络远程访问该计算机。以下是几种实现此目的的方法：

### 使用远程桌面连接
如果您使用的是Windows操作系统，您可以使用远程桌面连接（Remote Desktop Connection）来访问远程计算机。通过远程桌面连接，您可以像在本地计算机上一样访问远程计算机，并且可以在远程计算机上执行开机、关机等操作。

### 使用Windows命令行
在Windows操作系统中，您可以使用命令行工具来控制远程计算机的开机和关机。例如，您可以使用shutdown命令来关闭远程计算机，命令的格式如下：
`shutdown /m \\remote_computer_name /s /t 0`

其中，remote_computer_name是远程计算机的名称或IP地址，/s参数表示要关闭计算机，/t 0参数表示立即关闭计算机。

如果您要重启远程计算机，可以使用/r参数代替/s参数。

### 使用第三方远程管理软件
除了Windows自带的工具之外，还有许多第三方远程管理软件可以帮助您控制远程计算机的开关机。例如，TeamViewer、AnyDesk、远程助手等软件都可以实现远程控制计算机的功能。

> 请注意，在执行远程开关机操作时，必须确保您已经获得了合适的授权和权限，并且已经与远程计算机建立了安全的连接，以防止未经授权的访问和潜在的安全风险。

电脑群控手机的技术&远程电脑开关机

:::info{title="前语"}
H5游戏一般都是各大平台嵌套一个或多个iframe来达到运行游戏的目的。
所以我们一般直接找到游戏iframe的网址，就能无需登录游戏平台直接打开这个游戏（PS:部分游戏有参数验证、时效性验证等,导致无法实现这样的效果）
今天，我们就以某平台的某雄争霸H5来探讨一下可行性。
:::



## 打开游戏到本地游戏

> 打开游戏的最基础网页

打开游戏，并在F12中找到iframe游戏地址。

![image.png](https://seek.wiki/static/img/5c7bab79b86dae2234f0ca7cb1a5ad82.image.png)

我们找到地址之后，在新建一个标签页打开地址，发现可以正常打开游戏并进入游戏。


直接把indexTWLYMobile.html保存在本地并用FTP等工具上传到自己的网站文件qx目录，在浏览器中运行，肯定是会报错的。（我这里改为了index.html）

> 当然这个时候需要web服务的解析，nginx，tomcat等不限


![image.png](https://seek.wiki/static/img/a9ac4a55c47658ae858c47e45c3dc2b1.image.png)

> 1.1 先把报错的manifest.json、jszip.min.js和sdk.js搞定，其实很简单就是对比官方游戏加载的文件改写index.html的script等

> 1.2 manifest.json
我们通过对比官方的文件发现manifest.json应该是一个游戏需要加载的所有js的集合，改写JSON的内容达到直接调用官方的js文件


| 文件 | 修改内容 |
| --- | --- |
| ![image.png](https://seek.wiki/static/img/432f58c1d240b239104fc6f9fcf8961f.image.png) | ![image.png](https://seek.wiki/static/img/779704dea81816ab28f4a73e0f6e585c.image.png) |

> 1.3 改写index.html中jszip.min.js的引用位置


| 页面引用 | 文件修改 |
| --- | --- |
| ![](https://seek.wiki/static/img/06f0d6e872b1b788f8f3ecdd22436ca8.image.png) | ![](https://seek.wiki/static/img/96f1916c4cece16f47775be5f2c94a6a.image.png) |

> 1.3 上传到ftp空间，刷新后还是报错（简单分析了一下，是因为没有channel_id，无法加载渠道的JS文件导致的报错）才想起来官方的html后面是有很多参数的，我们附带上参数，刷新之后发现这个报错没了，但是还有EgretSubPackageLoading文件缺失没解决


![image.png](https://seek.wiki/static/img/f5b1e89532ef965283ac5b572bb997e6.image.png)

> 1.4 分析加载图片的启动器，可以发现egret.web.min.js中的loadImage函数


![image.png](https://seek.wiki/static/img/98ec5b01a47dbb5531018f15168844c1.image.png)

> 1.5 而egret.web.min.js是在manifest.json中指定的文件，所以我们修改egret.web.min.js中egret.web.min.js的位置为咱们自己修改后的文件的地址


![image.png](https://seek.wiki/static/img/7557c8bd73ae3ec935fb5f33a97a9f38.image.png)

> 1.6 可以看到e的值是去掉域名之后的文件位置，
 
` if(e.indexOf('http')==-1){e="https://XXXXX.com/qx-tw/"+e}`

> 1.7 刷新后发现还有.json文件报错，我们看启动器发现了egret.web.min.js中的open，照例断点刷新


![image.png](https://seek.wiki/static/img/157b224caf3b424ec16b45d0ee217a28.image.png)

> 1.8 然后保存，上传，刷新网页，你就会发现，在你的网站能打开并运行这个游戏


![image.png](https://seek.wiki/static/img/deb81c64446861cd1d6e080414e3bc72.image.png)


## 调试分析游戏

### 平民白嫖自动建造

> 1. 我们点击自动建造功能，他会提示需要贵族1才能开启

![image.png](https://seek.wiki/static/img/14cb9472443e425e45cc2e0cfb08c5ca.image.png)

> 2. 我们搜索一下自动建造，发现在main.min.js中找到相关代码，我们断点再开一次自动建造，发现u=game

![image.png](https://seek.wiki/static/img/85f368da6c88d814c969eaf593233206.image.png)

> 3. 我们直接用控制台执行一次

` game.Utils.send(game.KeyCode.CALL_MAIN_CITY_BUY_AUTO) `

![image.png](https://seek.wiki/static/img/7c1a5fcdc651df7a560c668c292fb8a4.image.png)

### sendWitArgs函数

刚刚贵族1的自动建造，同时让我们有一个新的发现：game.Utils.send，这个函数是发送你对游戏的操作的。
我们定位之后还发现了另一个函数game.Utils.sendWitArgs，这个函数才是游戏发送数据到服务器的。

### 鼠标出界后不暂停游戏动画

鼠标只要点击游戏外的其他地方，游戏就会暂停

` egret.ticker.pause = function(){} `

### 实时免费加速

（PS：这个游戏建筑升级5分钟之内就能免费点一次免费加速。）
游戏是怎么判断的建筑队列的状态呢？

![image.png](https://seek.wiki/static/img/43bc146a1636825fa712d9b592e7d4df.image.png)

> 1. 我们搜索空闲中，发现了能获取正在升级的建筑队列的函数
 
`game.MainCityController.Instance.getBuildingQueueList()`


![image.png](https://seek.wiki/static/img/ce31d1c03fd8c8ebf76c877051479996.image.png)

![image.png](https://seek.wiki/static/img/4e2d28296230c0253ecc75528128f5ad.image.png)

> 2. 等到队列状态成为免费升级的时候，执行一次函数，可发现status为0的时候是可以免费的，是2时不能免费的
这样的话，我们就可以写代码循环执行免费升级的（可以配合上自动升级）


```js
setInterval(function () {
        var list=game.MainCityController.Instance.getBuildingQueueList();
        if(list[0].status==0){
                game.Utils.sendWitArgs(game.KeyCode.CALL_MAIN_CITY_SPEED, {pos: list[0].id})//如果可以免费，那就免费升级
        }
}, 1000);
```

### 制作辅助

我们单独写一个ng.js并在index.html中加载。
写个select再把刚才的几个功能加进去。（防止遮挡游戏内容。这个select最好是可以写成是可以拖动位置的）
这样一个简单的内挂就搞定了，选中select的时候就会执行相应的操作。

![image.png](https://seek.wiki/static/img/60ac093a0eee239c05c169a3ee038240.image.png)

> 本帖仅是作为一个参考，其他的H5游戏处理方法可能会不太一样，举一反三。