用于webview的自定义字体

时间:2014-03-30 20:00:01

标签: android html css fonts webview

大家好,我有一个应用程序打开一个webview,其中包含包含文本和图像组合的文章。如你所知,文章有不同的字体,我想知道是否有一种方法让我可以通过Web视图呈现几个Helvetica字体,就像安装了这些字体的计算机一样;以某种方式将它们添加到我的项目中?谢谢你提前。

一些示例html我使用

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
    <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
    <TITLE>fin SUB_ The Lego Movie - Trent Erickson.docx</TITLE>
    <META NAME="GENERATOR" CONTENT="LibreOffice 4.1.5.3 (Linux)">
    <META NAME="CREATED" CONTENT="0;0">
    <META NAME="CHANGED" CONTENT="20140330;153648463119746">
    <STYLE TYPE="text/css">
    <!--
        @page { margin: 1in }
        P { margin-bottom: 0.08in }
        A:link { so-language: zxx }
    -->
    </STYLE>
     <link rel="stylesheet" type="text/css" href="mystyle.css">

</HEAD>
<BODY LANG="en-US" BGCOLOR="#ffffff" DIR="LTR">
<P STYLE="margin-bottom: 0in; page-break-inside: auto; widows: 0; orphans: 0; page-break-after: auto">
<FONT COLOR="#ff3333"><FONT FACE="Helvetica LT Std Cond"><FONT SIZE=2>Arts
&amp; Culture</FONT></FONT></FONT></P>
<P STYLE="margin-bottom: 0in; widows: 0; orphans: 0">“<FONT FACE="HelveticaNeueLT Std Thin"><FONT SIZE=4 STYLE="font-size: 16pt">The
Lego Movie” Lego Sets: Lego Misunderstood Their Own Movie</FONT></FONT>
                  <img src="lego.jpg">
</P>
<P ALIGN=RIGHT STYLE="margin-bottom: 0in; page-break-inside: auto; widows: 0; orphans: 0; page-break-after: auto">
<FONT FACE="Helvetica LT Std Cond">By:
</FONT><FONT FACE="Helvetica LT Std Cond">Trent Erickson                                                             
</FONT><FONT FACE="Helvetica LT Std Cond">Issue 3</FONT></P>

<P ALIGN=RIGHT STYLE="margin-bottom: 0in; widows: 0; orphans: 0">
</P>
<P STYLE="text-indent: 0.5in; margin-bottom: 0in; page-break-inside: auto; widows: 0; orphans: 0; page-break-after: auto">
<FONT FACE="HelveticaNeueLT Std">With over 4 billion dollars of
revenue, Lego is one of the most successful names in the toy
business, and rightly so: Lego is fantastic. It’s gender neutral,
it’s for kids, and it’s for adults. You can make a plane, a
train, or an automobile. Lego can be whatever you want it to be, but
it can also be constructed to perfectly match the instructions on the
cover of the set. </FONT>
</P>

我的样式表

 html {
    background-color: #e6e9e9;
    background-image: linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
    background-image: -o-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
    background-image: -moz-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
    background-image: -webkit-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
    background-image: -ms-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
}

body {
    margin: 0 auto;
    padding: 2em 2em 2em;
    max-width: 800px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
    font-size: 16px;
    line-height: 1.5em;
    color: #545454;
    background-color: #ffffff;
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
}


img {
    background: transparent;

    display: block;
    margin: 1.3em auto;
    max-width: 100%;
    -webkit-animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
}

@keyframes colorize {
    0% {
        -webkit-filter: grayscale(100%);
    }
    100% {
        -webkit-filter: grayscale(0%);
    }
}

@-webkit-keyframes colorize {
    0% {
        -webkit-filter: grayscale(100%);
    }
    100% {
        -webkit-filter: grayscale(0%);
    }
}

和我的webview的男女同校

public class Article extends Activity{
    private WebView webview;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.articleview);

        Bundle b = getIntent().getExtras();
        String KEY_LINK = b.getString("b");
        String url = getIntent().getStringExtra("key");

                webview = (WebView) findViewById(R.id.webView);



        webview.loadUrl(url);

        webview.loadUrl(KEY_LINK);



    }


}

1 个答案:

答案 0 :(得分:1)

您可以在项目中使用buy the Helvetica Webfont。然后您只需要包含提供给您的css链接,文本将在每个远程现代浏览器中以Helvetica呈现。