Question

这是我的代码我添加了字体，但它没有应用

@font-face {
  font-family: 'MyWebFont';
  src: url('KellySlab.ttf') format('truetype');
   }
body, h1, h4, form,footer{font family: 'MyWebFont',sans-serif;}

Answer 1

这是一个很棒的链接，通过非常好的示例CSS-tricks

让您更深入地了解此事

@ font-face规则应该在任何样式之前添加到样式表中。

public class Tab3Fragment extends Fragment {

private ImageView trailer_thumbnail;
private static List<MovieTrailer> movieTrailerList;
private static final String  preImgUrl = "http://img.youtube.com/vi/";
private  ProgressDialog mProgressDialog;
private static RecyclerView recyclerView;
private static RecyclerView.Adapter adapter;
private static RecyclerView.LayoutManager layoutManager;

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    View rootView =  inflater.inflate(R.layout.tab3_fragment, container, false);
    recyclerView = (RecyclerView) rootView.findViewById(R.id.trailer_recycleview);

    layoutManager = new LinearLayoutManager(getActivity());
    recyclerView.setLayoutManager(layoutManager);


    updateTrailer();

    return rootView;
}

@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
}

private void updateTrailer(){
    mProgressDialog = new ProgressDialog(getContext());
    mProgressDialog.setIndeterminate(true);
    mProgressDialog.setMessage("Loading...");
    mProgressDialog.show();
    Retrofit retrofit = new Retrofit.Builder().
            baseUrl(MainActivity.baseUrl).
            addConverterFactory(GsonConverterFactory.create()).
            build();

    final RequestInterface requestInterface = retrofit.create(RequestInterface.class);

    Call<MovieTrailerResponse> call1 = requestInterface.getMovieTrailers(list.get(index).getId(), MainActivity.apiKEy);

    call1.enqueue(new Callback<MovieTrailerResponse>() {
        @Override
        public void onResponse(Call<MovieTrailerResponse> call, Response<MovieTrailerResponse> response) {

            movieTrailerList = response.body().getResults();
            Log.i("trailer", preImgUrl + movieTrailerList.get(0).getKey() + "/.jpg");
            adapter = new TrailerRecyclerViewAdapter( movieTrailerList, getContext());
            recyclerView.setAdapter(adapter);
            /*
            Picasso.with(getActivity()).load( preImgUrl + movieTrailerList.get(0).getKey() + "/0.jpg").
                        placeholder(R.mipmap.ic_launcher).
                        error(R.mipmap.ic_launcher).
                        into(trailer_thumbnail);*/


            if (mProgressDialog.isShowing())
                mProgressDialog.dismiss();
        }

        @Override
        public void onFailure(Call<MovieTrailerResponse> call, Throwable t) {
            if (mProgressDialog.isShowing())
                mProgressDialog.dismiss();
        }
    });

}

然后用它来设置这样的元素：

    @font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

Answer 2

问题是您只加载 .ttf 文件，建议使用更多格式以便在大多数浏览器上运行（例如 woff ， woff2 ）。

考虑您的情况：

我建议您利用谷歌的CDN获取该字体系列。

您将避免处理额外的字体扩展名。

见下文：

body { font-family: 'Kelly Slab', sans-serif; }

<link href="https://fonts.googleapis.com/css?family=Kelly+Slab" rel="stylesheet"> <span>Testing Kelly Slab font-family</span>

如果您想在本地加载它，无论如何：

转到font-squirrel.com，搜索Kelly Slab并点击此处下载 .otf 文件：

下载完成后，将 .ot f文件上传到generator，然后下载生成的网络字体工具包，其中包括 woff ＆amp;的 woff2

加载它们：

@font-face { font-family: 'MyWebFont'; src: url('kellyslab-regular-webfont.woff2') format('woff2'), url('kellyslab-regular-webfont.woff') format('woff'); }

使用它：

selector { font-family: 'MyWebFont', sans-serif; }

如何在网页中导入字体

2 个答案: