分类 默认分类 下的文章

最近在项目中遇到一个问题,企业官网栏目标题需要直接引用艺术字制作的图片,但是清晰度与自适应性均不理想。于是我计划使用用外部字体制作,用纯css的方式替代图片。

原图片设计里,标题分位3层:

  1. 底层:长方形,英文字符,使用手写、非等宽字体,宽高不固定;
  2. 中层:直角三角形,图形,形状与大小为沿底层长方形左上右下对角线为分界,切割后的左下角部分的三角形遮罩;
  3. 上层:长方形,中文字符,宽高根据中层大小变动。

问题主要出现在底层,由于使用外部字体,在字体未载入的时候,chrome已经使用系统默认字体渲染出了英文字符,从而导致中层直角三角形遮罩层的宽高以及位置的计算与预想的位置偏离。关于字体载入的相关资料,可以自行搜索(FOIT与FOUT)。

由于不同平台的系统默认字体不同,给渲染后的结果添加hack,并不现实。所以解决问题的方法,还是要关注字体加载过程本身,通过JS判断字体是否加载完毕,在加载完毕之后调用回调函数,设置中层与上层的大小,是解决问题的思路。

于是我寻找了许多关于如何判断字体是否载入完成的JS库,包括Google提供的方案在内,都不奏效。最后发现这个项目(https://github.com/fedkwan/css-element-queries),以及该项目的原理解析(https://blog.crimx.com/2017/07/15/element-onresize)。

这个项目主要提供了可靠的js方法来判断字体是否加载完毕。具体到使用上,可以在页面头部加入不可见的字符,通过判断其宽高是否与外部字体样式加载完毕后相等,来判断字体是否加载完成。通常来说,非等宽字体,尤其是艺术字体,使用多个字符组合成整体进行判断,结果的可靠性会非常高,而一些等宽字体,可能字体不同,但宽高相同,这种情况下,可以使用非常用字符进行判断。

nginx

location / {

   if (!-e $request_filename) {
      rewrite ^/(.*)$ /index.php/$1 last;
   }  
}

location /m/ {

   if (!-e $request_filename) {
      rewrite ^/(.*)$ /m/index.php/$1 last;
   }  
}

apache

RewriteEngine on
RewriteCond $1 !^(index.php|js|css|image|robots.txt|favicon.ico)
RewriteRule ^(.*)$ index.php/$1 [L]

RewriteEngine on
RewriteCond $1 !^(index.php|js|css|image|robots.txt|favicon.ico)
RewriteRule ^(.*)$ /m/index.php/$1 [L]

因为要用到ssl,还是比较喜欢nginx。