Products
GG网络技术分享 2025-03-18 16:12 0
自定义字体可以使网站变得新颖,并使它脱颖而出。相信许多用户都想要为自己的网站添加自定义字体。今天我们将通过这篇教程为大家介绍运用Typekit和CSS3@Font-Face method为WordPress添加自定义字体的方法。
在Wordpress主题中添加自定义主题已经成为一种普遍的趋势。实际上有的主题中加载了很多的自定义字体。但是加载太多的字体会使得你的网站变慢。所以今天我们要跟您分享正确加载自定义字体的方法,不至于使得网站变慢。
在添加自定义主题之前,我们首先要了解如何获取自定义主题。
付费字体一般都比较贵,但是我们可以在很多地方找到免费字体,比如:Typekit,FontSquirrel,fonts.com 等。
Typekit中有付费和免费的字体,你可以使用付费的订阅也可以使用有限的免费的订阅。
首先注册Typekit账号并登陆,然后创建一个新的工具包:
然后选择一个你想要使用的字体,点击所选字体下方的“+Use fonts”按钮如下图:
随后进入如下界面:
在这个界面,需要我门做的有:
1、点击“Publish”按钮。
2、点击右上角Embed Code选项和左边栏中第一项中的Using fonts in CSS按钮,复制界面中出现的两行Embed Code代码和要用到的CSS代码到txt文件并保存(之后会用到)。
然后回到你的WordPress管理界面,点击进入安装插件界面,安装并启用 Typekit Fonts for WordPress 插件。插件启用完成后,点击设置目录下的Typekit Fonts选项,然后复制之前保存的Embed Code代码到插件设置界面,如下图:
然后添加如下代码到主题样式表中:
h1 .site-title {
font-family: \'modesto-condensed\', Arial, sans-serif;
}
(代码中的’modesto-condensed’,是随着选择字体的不同而不同的。该信息在之前txt文件中有保存。)
还可以通过修改大括号之前的内容来设置运用字体的位置。
用CSS3@font-face在WordPress中添加自定义字体
运用CSS3@font-face是添加WordPress自定义字体最直接的方法。
首先你需要下载你喜欢的字体,并在你的主题或子主题目录下新建一个文件夹,命名为“fonts”然后上传字体到该文件夹。上传完成后,你还需要用CSS3@font-face将字体加载到你的主题样式表中,代码如下:
@font-face {
font-family: Arvo;
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
font-weight: normal;
}
(不要忘记修改代码中font-family和url的值)
加载完成后我们将可以通过如下代码实现对字体的使用。
.h1 site-title {
font-family: \"Arvo\", Arial, sans-serif;
}
(该代码的使用跟上述Typekit中类似代码的使用方法一样)
这篇教程就给大家介绍到这里,希望对您有所帮助。
学过seo的朋友都应该知道,给图片加上alt和title对搜索排名来说是有好处的。
wordpress默认是无法自动给上传的图片加上alt和title属性的,我们可以通过下面方法来实现:
在主题函数function.php中加入下面代码:
functiontin_image_alt($content){global$post;
$pattern="/<img(.*?)src=(‘|\\")(.*?).(bmp|gif|jpeg|jpg|png)(‘|\\")(.*?)>/i";
$replacement=‘<img$1src=$2$3.$4$5alt="’.$post->post_title.’"title="’.$post->post_title.’"$6>’;
$content=preg_replace($pattern,$replacement,$content);
return$content;
}
add_filter(‘the_content’,’tin_image_alt’,15);
就可以自动给wordpress上传的图片加上alt和title属性了,非常方便。
下面给大家简单介绍一下alt和title对seo的重要性。
ALT属性作为搜索引擎惟一能识此外图片信息就显得极其紧张了,每当咱们浏览一个图片时,将鼠标移至图片上,呈现的笔墨则是ALT属性,它不只可以给搜索引擎辨认还可以给用户一个好的体验。
下面也浅要的说起了一下ALT属性是搜索引擎惟一可以识此外图片信息.当蜘蛛爬取到咱们网站时,图文并茂的文章仿佛更能吸收到蜘蛛,如果在文章图片中添加之ALT属性,那末蜘蛛爬取时可以看懂图片的信息,这便是关于搜索引擎的一种敌对,如果不给图片添加ALT属性,那末搜索引擎抓取图片时会以为这个图片没有主题,可要可不要,添加了搜索引擎关于文章的辨认难度,从而发生不敌对.
实在可以经过一个很简略的例子就能明确ALT属性的意义,比方去超市购物时,你发明一个生疏的货色,你感觉很离奇,然而底下没有密码标价,你关于于该物品毫无理解,那末你也不太会将这个物品间接拿到购物车中,实在ALT属性也可比作商品的价钱,实在都是一个情理.
网站要害词密度是经过蜘蛛爬取,而后停止剖析得进去的一个后果,要害词密度调配切当,搜索引擎就会赐与全部网页一个不错的权重,而且ALT属性会作为一个十分牢靠的参考点.很多人也会将添加ALT属性作为晋升网页要害词密度的一种手腕.别的,该属性还能让搜索引擎辨别网页的主题,并赐与一个不错的敌对度.
网站优化为何要给图片添加ALT属性?
进修搜索引擎优化以前的文章大师明确一个情理,如果用户在关上网站时,由于网速亦或许网站服务器的缘由,招致图片显现不进去,而ALT属性就可以很显著的让用户晓得这个图片是想表白甚么意义,尽管不克不及到达图片的成果,但也是一个不错的弥补步伐.
下面讲到过图文并茂的文章常常更可以吸收用户,实在这类图文并茂的文章关于于搜索引擎的算法也能起到要害感化从而也就晋升网站的权重.引荐浏览:建站进修 写文章图文并茂有甚么益处.
Demand feedback