我自己排的电子书只能在电脑上正常显示标题字体和背景插图，在手机多看上就不行了 ，该咋办啊


kindle也显示不了字体和i标签的插图，只能显示一个背景插图，我看大佬的作品是没问题的，手机也可以正常显示。以下是我的css
@ charset "UTF-8';
/*Global setting*/
/*CSS Reset*/
*{
margin:0;
padding:0;
border:none;
}
ul,ol {
list-yle:none;
}
a {
toxt-decor tion:none;
}
/* Wrap */
.Wrap {
max-width:40em;
margin:0 auto;
}
/* Images ing */
.images ing {
width:100%;
}
.color .images{
margin: 1.5em 0;
border:501solid #000
}
/* p */
p{
text-indent:2em;
line-heigin:1.5em;
margin:1em;
}
/* Color Images pages */
.img-chara h3 {
border-bottom:1px solid #000
}
.tooko h3, .tooko div {
flot:right;
}
.tooko h3 {
margin:2.7em auto 0.5em;
padding-right:1em;
}
/* Chapter Title */
.title {
display:table;
fone-size:1em;
height:100%;
width:100%;
}
@font-face {
font-family: 'MyCustomFont'; /* 给字体定义一个名称，方便在其他地方引用 */
src: url('../Fonts/111.ttf') format('truetype'),
url('../Fonts/111.woff') format('woff'),
url('../Fonts/111.woff2') format('woff2'); /* 提供多种字体格式以兼容不同浏览器 */
}
.title-item {
display: block;
background: url("../Images/01.png") no-repeat right top; /* 将图片位置调整到标题的右上角，即靠右上 */
-moz-background-size:cover;
-webkit-background-size:cover;
background-size: auto 50%; /* 宽度自适应，高度固定为 100% */
font-size: 1.3em;
font-family: 'MyCustomFont'; /* 使用之前定义好的字体名称 */
text-shadow: 1px 1px 0 black;
color: #8B0000;
}
.title-item1 {
display: block;
background: url("../Images/02.png") no-repeat right top; /* 调整图片位置到标题左侧中心 */
-moz-background-size:cover;
-webkit-background-size:cover;
background-size: auto 50%; /* 宽度自适应，高度固定为 100% */
font-size: 1.3em;
font-family: MyCustomFont ; /* 使用之前定义好的字体名称 */
text-shadow: 1px 1px 0 black;
color: #8B0000;
}
.title-item2 {
display: block;
background: url("../Images/03.png") no-repeat right top; /* 调整图片位置到标题左侧中心 */
-moz-background-size:cover;
-webkit-background-size:cover;
background-size: auto 60%; /* 宽度自适应，高度固定为 100% */
font-size: 1.3em;
font-family: MyCustomFont ; /* 使用之前定义好的字体名称 */
text-shadow: 1px 1px 0 black;
color: #8B0000;
}
.title-item3 {
display: block;
background: url("../Images/04.png") no-repeat right top; /* 调整图片位置到标题左侧中心 */
-moz-background-size:cover;
-webkit-background-size:cover;
background-size: auto 50%; /* 宽度自适应，高度固定为 100% */
font-size: 1.3em;
font-family: MyCustomFont ; /* 使用之前定义好的字体名称 */
text-shadow: 1px 1px 0 black;
color: #8B0000;
}
.title-item4 {
display: block;
background: url("../Images/05.png") no-repeat right top; /* 调整图片位置到标题左侧中心 */
-moz-background-size:cover;
-webkit-background-size:cover;
background-size: auto 50%; /* 宽度自适应，高度固定为 100% */
font-size: 1.3em;
font-family: MyCustomFont ; /* 使用之前定义好的字体名称 */
text-shadow: 1px 1px 0 black;
color: #8B0000;
}
.title-item5 {
display: block;
background: url("../Images/06.png") no-repeat right top; /* 调整图片位置到标题左侧中心 */
-moz-background-size:cover;
-webkit-background-size:cover;
background-size: auto 50%; /* 宽度自适应，高度固定为 100% */
font-size: 1.3em;
font-family: MyCustomFont ; /* 使用之前定义好的字体名称 */
text-shadow: 1px 1px 0 black;
color: #8B0000;
}
.title-item6 {
display: block;
background: url("../Images/07.png") no-repeat right top; /* 调整图片位置到标题左侧中心 */
-moz-background-size:cover;
-webkit-background-size:cover;
background-size: auto 50%; /* 宽度自适应，高度固定为 100% */
font-size: 1.3em;
font-family: MyCustomFont ; /* 使用之前定义好的字体名称 */
text-shadow: 1px 1px 0 black;
color: #8B0000;
}
.title-item7 {
display: block;
background: url("../Images/08.png") no-repeat right top; /* 调整图片位置到标题左侧中心 */
-moz-background-size:cover;
-webkit-background-size:cover;
background-size: auto 50%; /* 宽度自适应，高度固定为 100% */
font-size: 1.3em;
font-family: MyCustomFont ; /* 使用之前定义好的字体名称 */
text-shadow: 1px 1px 0 black;
color: #8B0000;
}
.title-item8 {
display: block;
background: url("../Images/09.png") no-repeat right top; /* 调整图片位置到标题左侧中心 */
-moz-background-size:cover;
-webkit-background-size:cover;
background-size: auto 50%; /* 宽度自适应，高度固定为 100% */
font-size: 1.3em;
font-family: MyCustomFont ; /* 使用之前定义好的字体名称 */
text-shadow: 1px 1px 0 black;
color: #8B0000;
}
.title-item9 {
display: block;
background: url("../Images/010.png") no-repeat right top; /* 调整图片位置到标题左侧中心 */
-moz-background-size:cover;
-webkit-background-size:cover;
background-size: auto 50%; /* 宽度自适应，高度固定为 100% */
font-size: 1.3em;
font-family: MyCustomFont ; /* 使用之前定义好的字体名称 */
text-shadow: 1px 1px 0 black;
color: #8B0000;
}
.title-item10 {
display: block;
background: url("../Images/011.png") no-repeat right top; /* 调整图片位置到标题左侧中心 */
-moz-background-size:cover;
-webkit-background-size:cover;
background-size: auto 50%; /* 宽度自适应，高度固定为 100% */
font-size: 1.3em;
font-family: MyCustomFont ; /* 使用之前定义好的字体名称 */
text-shadow: 1px 1px 0 black;
color: #8B0000;
}
.title-item11 {
display: block;
background: url("../Images/012.png") no-repeat right top; /* 调整图片位置到标题左侧中心 */
-moz-background-size:cover;
-webkit-background-size:cover;
background-size: auto 50%; /* 宽度自适应，高度固定为 100% */
font-size: 1.3em;
font-family: MyCustomFont ; /* 使用之前定义好的字体名称 */
text-shadow: 1px 1px 0 black;
color: #8B0000;
}
.title-item12 {
display: block;
background: url("../Images/013.png") no-repeat right top; /* 调整图片位置到标题左侧中心 */
-moz-background-size:cover;
-webkit-background-size:cover;
background-size: auto 50%; /* 宽度自适应，高度固定为 100% */
font-size: 1.3em;
font-family: MyCustomFont ; /* 使用之前定义好的字体名称 */
text-shadow: 1px 1px 0 black;
color: #8B0000;
}
.title-item13 {
display: block;
background: url("../Images/014.png") no-repeat right top; /* 调整图片位置到标题左侧中心 */
-moz-background-size:cover;
-webkit-background-size:cover;
background-size: auto 60%; /* 宽度自适应，高度固定为 100% */
font-size: 1.3em;
font-family: MyCustomFont ; /* 使用之前定义好的字体名称 */
text-shadow: 1px 1px 0 black;
color: #8B0000;
}
.title-item14 {
display: block;
background: url("../Images/015.png") no-repeat right top; /* 调整图片位置到标题左侧中心 */
-moz-background-size:cover;
-webkit-background-size:cover;
background-size: auto 50%; /* 宽度自适应，高度固定为 100% */
font-size: 1.3em;
font-family: MyCustomFont ; /* 使用之前定义好的字体名称 */
text-shadow: 1px 1px 0 black;
color: #8B0000;
}
.title-item15 {
display: block;
background: url("../Images/016.png") no-repeat right top; /* 调整图片位置到标题左侧中心 */
-moz-background-size:cover;
-webkit-background-size:cover;
background-size: auto 50%; /* 宽度自适应，高度固定为 100% */
font-size: 1.3em;
font-family: MyCustomFont ; /* 使用之前定义好的字体名称 */
text-shadow: 1px 1px 0 black;
color: #8B0000;
}
.title-item001 {
display: block;
background-size: auto 50%; /* 宽度自适应，高度固定为 100% */
font-size: 1.3em;
font-family: MyCustomFont ; /* 使用之前定义好的字体名称 */
text-shadow: 1px 1px 0 black;
color: #8B0000;
}
.title-item002 {
display: block;
background-size: auto 50%; /* 宽度自适应，高度固定为 100% */
font-size: 1.3em;
font-family: t ; /* 使用之前定义好的字体名称 */
text-shadow: 1px 1px 0 black;
color: #ff0000;
}
.title-ak47 i {
display: inline-block;
width: 3em;
height: 3em;
background-size: contain; /* 将背景图片大小设置为覆盖整个元素，实现自适应效果 */
background-repeat: no-repeat; /* 确保图片不重复显示 */
background-position: ; /* 让图片在他人元素中心位置显示 */
background-image: url("../Images/123.png");
vertical-align: middle;
}
}
.title-ak47 i {
background-image:url("../Images/123.png")}
求大佬们不吝赐教