简体   繁体   English

供Webview使用的自定义字体

[英]Custom Fonts for webview to use

Hello all I have an app that opens a webview containing articles that have combinations of text and images. 大家好,我有一个应用程序可以打开一个包含有文本和图像组合的文章的webview。 As you know articles have varying fonts and I was wondering if there was a way for me to have several Helvetica fonts to be rendered by the web view exactly as it would be on a computer with those fonts installed; 如您所知,文章的字体不同,我想知道是否有一种方法可以使Web视图呈现几种Helvetica字体,就像在安装了这些字体的计算机上一样。 add them to my project in a way? 以某种方式将它们添加到我的项目中? thanks in advanced. 提前致谢。

some sample html I'm using 我正在使用一些示例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>

my style sheet 我的样式表

 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%);
    }
}

and the coed for my webview 和我的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);



    }


}

You can simply buy the Helvetica Webfont for use in your projects. 您只需购买Helvetica Webfont即可在您的项目中使用。 Then you only have to include the css link provided to you and the text will be rendered in Helvetica in every remotely modern browser. 然后,您只需要包括提供给您的css链接,文本就会在Helvetica中的每个远程现代浏览器中呈现。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM