如何在wbeview中注入自定义css

时间:2017-03-04 06:54:37

标签: android html css webview android-webview

我试图在Android应用程序中向webview内容添加自定义css,但它在webview中没有显示任何效果,可能是因为它没有成功添加。

我的自定义字体css:

/* normal */
@font-face {
   font-family: 'PT_Sans-Web';
   font-style: normal;
   font-weight: 400;
   src: local('PT_Sans Web Regular'), local('PT_Sans-Web-Regular'),url(file:///android_asset/fonts/PT_Sans-Web-Regular.ttf);
}

/* bold */
@font-face {
   font-family: 'PT_Sans-Web';
   font-style: normal;
   font-weight: 700;
   src: local('PT_Sans Web Bold'), local('PT_Sans-Web-Bold'), url(file:///android_asset/fonts/PT_Sans-Web-Bold.ttf);
 }

style.css

body {
font-family: PT_Sans-Web;
color: #4DB2EC;
font-size: 15pt;
width: 100%;
background: #fff;
}

strong {
font-weight: bold;
}

embed,object,img{display: block; max-width:100%; height: auto;}
.frame {width: 100%} 
#templates{display:none}
.subs-loading {width: 90%; margin: 2em auto; font-size: 1.5em; }
#subscriptions {
position: relative;
}

#container {
padding: 16px;
}

p {
font-family: PT_Sans-Web;
color: #4DB2EC;
font-size: 7pt;
width: 100%;
background: #fff;
line-height:11.38pt
}

h1 {
font-size: 2em;
line-height: 1.2em;
font-weight: bold;
color: #222;
margin: .1em 0 .2em;
}

在webview中加载代码:

mWebView.loadDataWithBaseURL(
            "file:///android_asset/",
            content,
            "text/html",
            "utf-8",
            null);
string content = "<!DOCTYPE html><html><head><meta charset='UTF-8' />"
            + "<meta name='viewport' content='width=device-width, initial-scale=1'>"
            + "<link rel='stylesheet' type='text/css' href='pt_sans.css'>"
            + "<link rel='stylesheet' type='text/css' href='webview.css'>"
            + "<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\">"
            + "</head><body>"
            + mPostContent
            + "</body></html>";

我在webChromeclient中使用webview。但这并没有在webview中显示任何效果。我做错了吗?这是在webview中添加css的更好方法。

在打开webview时,我在日志中收到此错误:

E/libEGL: validate_display:99 error 3008 (EGL_BAD_DISPLAY)

此错误在测试设备nexus 5x上提供,并在其他设备上正常工作。

1 个答案:

答案 0 :(得分:0)

css文件放入assets文件夹,然后在html中对其进行处理。像这样更新您的content变量:

string content = "<!DOCTYPE html><html><head><meta charset='UTF-8' />"
        + "<link rel=\"stylesheet\" href=\"file:///android_asset/style.css\">" //<-- Add this line
        + //...